Grid-template-columns In Chrome 80 Inconsistently Computed

I have a page with four forms. Each form's layout is defined using the following CSS grid configuration, which is shared between all of the forms: .base-grid-wrapper { display:

Solution 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)

Solution 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