Prevent grid items from expanding when content is added

Question

I'm trying to create a layout where the screen is divided into some number of equally-sized cells. When I fill one of the cells with content, it stretches to be larger than the other cells, even though the content is much smaller than the cell itself.

Why is the cell stretching despite it being plenty big to hold its content? How can I prevent it from resizing?

html, body {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  background-color: #880022;
}

#content {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-rows: 20px auto 20px;
  grid-template-columns: 20px auto 20px;
}

#content2 {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: auto;
  height: 100%;
  background-color: #ff00ff;
}

#grid {
  grid-row-start: 2;
  grid-column-start: 2;
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: auto auto;
  grid-gap: 2px 2px;
}

.tile {
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tile span {
  font-size: 2em;
}

.tile:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

<div id="content">
  <div id="grid">
    <div class="tile"><span>test</span></div>
    <div class="tile"></div>
    <div class="tile"></div>
    <div class="tile"></div>
  </div>
</div>

Answer 1

You're setting the column and row sizes to auto. This means they will be sized based on their content. Instead, use fr units, which use the free space in the container.

#content {
  display: grid;
  grid-template-rows: 20px auto 20px;
  grid-template-columns: 20px auto 20px;
  height: 100vh;
  background-color: #880022;
}

#grid {
  grid-row-start: 2;
  grid-column-start: 2;
  display: grid;
  grid-template-rows: 1fr 1fr;     /* adjustment */
  grid-template-columns: 1fr 1fr;  /* adjustment */
  grid-gap: 2px;
}

.tile {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.2);
}

.tile:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

.tile span {
  font-size: 2em;
}

body {
  margin: 0;
}

<div id="content">
  <div id="grid">
    <div class="tile"><span>test</span></div>
    <div class="tile"></div>
    <div class="tile"></div>
    <div class="tile"></div>
  </div>
</div>

jsFiddle demo

Answer 2

You have a lot of extra markup, here is a simplified version, the trick is using fr unit instead of auto and you can use repeat()

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: #802;
}

#grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, minmax(80px, 1fr));
  grid-gap: 2px;
  padding: 20px;
  box-sizing: border-box;
  height: 100vh
}

.tile {
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tile span {
  font-size: 2em;
}

.tile:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

<div id="grid">
  <div class="tile"><span>test</span></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
</div>