Why won't fr units work with grid-template-rows on CSS grid?

Question

I can't get the grid-template-rows to work with fr units. I can get the row height to change with other units like pixels but not with fr units.

I don't understand why this isn't working as the fr units are working with grid-template-columns.

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 5px;
  text-align: center;
}

<div class="grid-container">
  <div class="item"> 1 </div>
  <div class="item"> 2 </div>
  <div class="item"> 3 </div>
  <div class="item"> 4 </div>
  <div class="item"> 5 </div>
  <div class="item"> 6 </div>
  <div class="item"> 7 </div>
  <div class="item"> 8 </div>
  <div class="item"> 9 </div>
  <div class="item"> 10 </div>
  <div class="item"> 11 </div>
  <div class="item"> 12 </div>
  <div class="item"> 13 </div>
  <div class="item"> 14 </div>
  <div class="item"> 15 </div>
  <div class="item"> 16 </div>
  <div class="item"> 17 </div>
  <div class="item"> 18 </div>
  <div class="item"> 19 </div>
  <div class="item"> 20 </div>
  <div class="item"> 21 </div>
  <div class="item"> 22 </div>
  <div class="item"> 23 </div>
  <div class="item"> 24 </div>
  <div class="item"> 25 </div>
  <div class="item"> 26 </div>
  <div class="item"> 27 </div>
  <div class="item"> 28 </div>
  <div class="item"> 29 </div>
  <div class="item"> 30 </div>
</div>

This is a template to illustrate the result.

I am not sure why some of the blocks are missing on the bottom diagram.

Answer 1

Your container has no extra height. So there's no free space for the fr unit to distribute.

Set a height to the container (e.g., height: 100vh).

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 5px;
  text-align: center;
  height: 100vh; /* new */
}

body {
  margin: 0;
}

<div class="grid-container">
  <div class="item"> 1 </div>
  <div class="item"> 2 </div>
  <div class="item"> 3 </div>
  <div class="item"> 4 </div>
  <div class="item"> 5 </div>
  <div class="item"> 6 </div>
  <div class="item"> 7 </div>
  <div class="item"> 8 </div>
  <div class="item"> 9 </div>
  <div class="item"> 10 </div>
  <div class="item"> 11 </div>
  <div class="item"> 12 </div>
  <div class="item"> 13 </div>
  <div class="item"> 14 </div>
  <div class="item"> 15 </div>
  <div class="item"> 16 </div>
  <div class="item"> 17 </div>
  <div class="item"> 18 </div>
  <div class="item"> 19 </div>
  <div class="item"> 20 </div>
  <div class="item"> 21 </div>
  <div class="item"> 22 </div>
  <div class="item"> 23 </div>
  <div class="item"> 24 </div>
  <div class="item"> 25 </div>
  <div class="item"> 26 </div>
  <div class="item"> 27 </div>
  <div class="item"> 28 </div>
  <div class="item"> 29 </div>
  <div class="item"> 30 </div>
</div>

---

I don't understand why this isn't working as the fr units are working with grid-template-columns.

Block elements consume the full width of their parent, by default. So you don't need to define width: 100%.

Not so with height. Most elements are set by default to the height of their content (height: auto). So you need to define a height if you want the container to be taller than the content.

That's why the fr units were working with grid-template-columns but not grid-template-rows.