I'm having trouble getting the row height to change using fr units in my grid-template-rows. It seems to work fine with other units like pixels, but not with fr.
I find it confusing that the fr units work perfectly fine with grid-template-columns, so I'm not sure why they're causing issues here.
.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 just a template to show what the outcome should be.
I am puzzled as to why some of the blocks are missing in the lower diagram.