CSS grid - How do I let all column/rows grow evenly when there's overflow

Question

I feel like I'm missing something on this point, because the behavior I observe isn't exactly consistent.

I'm generating random grids with JavaScript. I set a number of columns and rows on the grid and then I set the start and end values of the cells separately. What I want is that when there's overflow (ie. the content of a cell is higher than the minimum value I want, 50px), the cells grows and the cells on the same rows also grow. See this Fiddle

Here I'm using

grid-template-rows: repeat(4, minmax(50px, auto));

However, as you can see, for some reason only the 3rd row grows and not the 4th. This can be fixed by setting that line to

grid-template-rows: repeat(4, minmax(50px, 1fr));

But that results in all rows growing evenly when this overflow is happening, which is not what I want. See this Fiddle

Also, strangely, it does work when I overflow the 6th cell instead of the 4th. See this Fiddle. The 2nd and the 3rd row are growing evenly, as the 6th cell occupies both. This is the behavior I expect and want in the first example as well.

Is this a bug? It's the same on Chrome and Firefox, so I think I'm just missing something, though.

Answer 1

In your first fiddle, what makes the difference is just that in the third row there is no element that spans a single row. That makes the difference between this row and the 4th.

You can solve this issue just adding phantom elements to populate all the rows: (the filler elements in the snippet)

When the grid dimensions are calculated, the items that only span a row are taken into account. The reason is that the restrictions imposed by these items are less flexible than the others, because they can be handled only in the specific row.

Later, the items spanning 2 rows are taken into account. When doing so, if the 2 rows are occupied, and the item is taller than the space already calculated, both rows grow. But if there is only one row that has beeen calculated (because it has elements in it) and the other hasn't been, then the best option is to **keep* the dimension of the already calculated row, and grow only the other one.

body{margin:0;padding:20px;font-size:24px;font-family:sans-serif}
body > div{
  display: grid;
  max-width: 500px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows:    repeat(4, minmax(50px, auto));
  grid-gap: 20px;
}
body > div > div{
  padding: 20px;
  background-color: #CCC;
}
body > div > div:nth-child(1){
  grid-row-start:    1;
  grid-column-start: 1;
}
body > div > div:nth-child(2){
  grid-row-start:    1;
  grid-column-start: 2;
}
body > div > div:nth-child(3){
  grid-row-start:    1;
  grid-row-end:      3;
  grid-column-start: 3;
}
body > div > div:nth-child(4){
  grid-row-start:    3;
  grid-row-end:      5;
  grid-column-start: 2;
}
body > div > div:nth-child(5){
  grid-row-start:    4;
  grid-column-start: 1;
}
body > div > div:nth-child(6){
  grid-row-start:    2;
  grid-row-end:      4;
  grid-column-start: 1;
}

<div class="test">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4<br>4<br>4<br>4<br>4<br>4<br>4</div>
  <div>5</div>
  <div>6</div>
  <filler></filler>
  <filler></filler>
  <filler></filler>
  <filler></filler>
</div>