Prevent grid items from expanding when content is added

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>

Solution

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>

Prevent grid items from expanding when content is added

jsFiddle demo