CSS Grid auto-fit + minmax adds phantom row

Question

There seems to be a strange bug in CSS grid for Chrome (doesn't happen in Firefox). It happens when using repeat(auto-fit, minmax(300px, 1fr)) for the grid-template-columns style. For some reason even though there are only two child divs, the parent div thinks there is a another element and generates a huge amount of whitespace and unnecessary grid gaps. Any idea how to legitimately fix this without making a janky fix?

Here's a recreation of the bug: https://codepen.io/rantis/full/gXxxRB/

.two_item_grid_container {
  repeat(auto-fit, minmax(300px, 1fr));
  /* If you reduce the min size to 45px the grid fixes itself for some reason */
}

You should post enough code so we can reproduce the problem. — Michael Benjamin
@Michael_B see the edits above. There's a link to a codepen demo I made which shows the issue. — PorcupineRending
@PorcupineRending questions about debugging code need to include the code in the question itself; a link to an off-site demo is inadequate. — TylerH
@Michael_B I ended up reporting the bug to the Chrome development team and they confirmed it was an bug but was already fixed for Chrome v63 and above; so when that publicly rolls out it will be less of an issue. — PorcupineRending

Michael Benjamin Michael Benjamin · Accepted Answer · 2017-11-20T20:44:07

There does appear to be a rendering difference between Chrome and Firefox / Edge when using auto-fill in this context. Here is a possible workaround:

Use a more definite column size and a media query.

.two_item_grid_container {
     display: grid;
     grid-template-columns: repeat(2, minmax(300px, 1fr));
     grid-auto-rows: auto;
     grid-gap: 20px;
}

@media ( max-width: 500px ) {
  .two_item_grid_container {
     grid-template-columns: 1fr;
  }
}

revised codepen

CSS Grid auto-fit + minmax adds phantom row

1 Answers