CSS Grid column width [duplicate] - css

Question

This question already has answers here:
Why does Chrome 80 cause this grid-template-rows: auto problem
(2 answers)
Closed 3 years ago.
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: grid;
grid-template-columns: repeat(12, 1fr);
grid-row-gap: 1em;
grid-column-gap: 1em;
width: 75%;
}
Since Chrome 80 was released, the styling for the first of these forms has been (sort of) broken. The computed values for grid-template-columns is non-uniform, but only for the first of the four forms. For the following three forms--which use the same base grid definition--the grid's columns are uniformly sized, which is what I expect when using repeat(12, 1fr) as I have. Before Chrome 80, this was not the case: all of the form's grids had uniformly-sized columns.
In other browsers (Safari and Firefox), the columns render as expected. Is there something that changed in Chrome 80 that would have caused this? Searching through the Chrome changelog, I can't seem to find anything relevant.
I've tried to see if there are any wider-scoped CSS rules that might be causing this, but I can't find anything. I admit I'm not the most advanced CSS user, so I definitely could have configured the grid incorrectly, or something, but look at the Stackblitz linked below to see if this is the case.
I saw a couple of other similar Stackoverflow questions, but none of them seem to quite fit the problem I'm seeing:
CSS grid behaviour different in Chrome and Firefox
--> perhaps most similar to my problem, but doesn't have any relevant solutions, but it does have confirmation of the problem
Has anybody faced issue working with Chrome 80 and CSS Grid
--> similar to my problem, but it doesn't have a good working example of the problem, and thus it doesn't have any useful responses
Why does Chrome 80 cause this grid-template-rows: auto problem
--> very different configuration than in my case, so not super relevant to what I'm seeing
For what it's worth, this is an Angular 8 application using Angular Material, but I'm pretty certain that that's not the source of this problem, especially considering it works as intended in other browsers.
Here's a Stackblitz that replicates the problem (be sure to open in Chrome 80+): editable & (inspectable) hosted app.
Here are some screenshots, as well:
First form
Chrome Devtools - grid outline
Firefox Devtools - grid outline
Chrome Devtools - non-uniformly-computed grid column widths
Later form, using the same base grid definition
Chrome Devtools - grid outline
Chrome Devtools - uniformly-computed grid column widths

Answer 1

You issue is almost similar to the question you linked1 (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
1: 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