title: CSS grid - How do I let all column/rows grow evenly when there's overflow
body: <p>I feel like I'm missing something on this point, because the behavior I observe isn't exactly consistent.</p>
  
  <p>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 <strong><a href="https://jsfiddle.net/GustvandeWal/nz4fd6g0/" rel="noreferrer">this Fiddle</a></strong></p>
  
  <p>Here I'm using</p>
  
  <pre><code>grid-template-rows: repeat(4, minmax(50px, auto));
  </code></pre>
  
  <p>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</p>
  
  <pre><code>grid-template-rows: repeat(4, minmax(50px, 1fr));
  </code></pre>
  
  <p>But that results in <strong>all</strong> rows growing evenly when this overflow is happening, which is not what I want. See <strong><a href="https://jsfiddle.net/GustvandeWal/nz4fd6g0/1/" rel="noreferrer">this Fiddle</a></strong></p>
  
  <p>Also, strangely, it <strong>does</strong> work when I overflow the 6th cell instead of the 4th. See <strong><a href="https://jsfiddle.net/GustvandeWal/nz4fd6g0/2/" rel="noreferrer">this Fiddle</a></strong>. 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.</p>
  
  <p>Is this a bug? It's the same on Chrome and Firefox, so I think I'm just missing something, though.</p>