[css-grid] Intrinsic contributions for items spanning flex tracks are not web compatible · Issue #4783 · w3c/csswg-drafts (original) (raw)

The behavior used to be:

• If an item with span 1 is in an intrinsic flex track, its intrinsic contribution is taken into account.
  This is done in §11.5.2 simultaneously with contributions of items with span 1 in intrinsic non-flex tracks.
• If an item with span>1 includes a flex track, its intrinsic contribution is ignored.

The spec was later changed (#2177 and follow-ups) to make it more consistent:

• Intrinsic contributions of items spanning some intrinsic track are always taken into account.
• For items with span>=1 that include some intrinsic flex track, this is done grouping all such items together (not by span). And it happens in §11.5.4, after distributing contributions of items with span>1 that don't include any intrinsic flex track.

Firefox hasn't implemented the new behavior (bug 1530097). I did it in Chromium (bug 935102), but it doesn't seem web compatible (bug 1051039 and multiple duplicates), so I had to revert. There are basically 2 problems.

Problem 1

It seems that it's kinda popular to divide the grid into 12 equal columns, and then add a class to the items specifying how many columns should be spanned.

.grid { display: grid; grid-template-columns: repeat(12, 1fr) } .col-8 { grid-column: span 8; background: green } .col-4 { grid-column: span 4; background: red } .single-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }

Used to look like

But gotcha, 1fr means means minmax(auto, 1fr), so the columns are intrinsic! If the contents of some column are big, they will make the column big too.

Note that the spec change was totally reasonable, it just made the testcase behave like

.grid { display: grid; grid-template-columns: 8fr 4fr } .col-8, .col-4 { grid-column: span 1 }

Authors should be using minmax(0, 1fr) instead, or min-width: 0. But they are using 1fr because it's simpler and used to work as they wanted.

Problem 2

This affects authors who are aware that 1fr is intrinsic and may "explode" the grid. They didn't want this, so they sized the flex columns with minmax(0, 1fr). However, they also have non-flex columns, and items spanning both kinds of columns:

.grid { display: grid; grid-template-columns: auto minmax(0, 1fr) } .item1 { background: cyan } .item2 { background: green } .item3 { grid-column: span 2; background-color: red }