grid-template-columns in Chrome 80 inconsistently computed [duplicate]

Answer 1

You issue is almost similar to the question you linked¹ (where I also answered) and it has to do with how chrome is dealing with 1fr which is equal to minmax(auto,1fr).

Using minmax(0,1fr) seems to fix the issue but I need to dig more in order to identify why. It's either a bug or they changed the way minmax() is calculated.

will update with the bug report or the detailed explanation

¹: That questions deals with a row configuration where we need to do the opposite. Use 1fr (minmax(auto,1fr)) instead of minmax(0,1fr)

Answer 2

I had the same problem this morning. I had the bug reported on one of the pages I am responsible for, for the latest chrome version at that time. I made sure I had the latest chrome installed and went to check the issues this morning and 1fr was really not being respected. Maybe 15 minutes ago I went on ahead to report the chrome bug and there it was new update pending, so I've updated the chrome again, second time today, and problem was fixed.

I did some digging and I am pretty sure they did change how css grid is handled, more specifically:

[css-grid] Accommodate spanning items crossing flexible tracks

But since it caused breakage across the web they reverted the change. I think it's referenced here https://chromium.googlesource.com/chromium/src/+/b1738fb61215bb8610e08f65de4d01681e250f7f.

Edit: There is also this answer that goes into more details for others having this issue https://stackoverflow.com/a/60284361/12285468