Repository navigation
[css-grid] Does grid-template-areas really expand the explicit grid? #4914
Description
From https://drafts.csswg.org/css-grid/#implicit-grids
The
grid-template-rows,grid-template-columns, andgrid-template-areasproperties define a fixed number of tracks that form the explicit grid.
I'm not convinced about the latter. For example, consider
#grid {
display: grid;
grid-template-areas: '. .';
grid-template-columns: 10px;
grid-auto-columns: 20px;
}If the explicit grid has 2 columns due to grid-template-areas, which is the track sizing function of the 2nd one? The spec says that grid-auto-columns is only for implicit tracks!
The grid-auto-rows and grid-auto-columns properties size these implicit grid tracks.
Then https://drafts.csswg.org/css-grid/#propdef-grid-auto-columns seems to redefine implicit tracks in a way that ignores grid-template-areas:
If a grid item is positioned into a row or column that is not explicitly sized by grid-template-rows or grid-template-columns, implicit grid tracks are created to hold it.
I have tested it a bit and it seems that Chromium and Firefox are consistent in this regard:
- Evidence that extra tracks from
grid-template-areasare explicit:- They are created even if there is no item in them.
- Extra lines are not considered to have all names in https://drafts.csswg.org/css-grid/#grid-placement-int.
- Evidence that extra tracks from
grid-template-areasare implicit:- They are sized using
grid-auto-columns/rows. They are not included in the resolved value of[This was reverted due to web compat, now all tracks are included. And not including tracks created withgrid-template-rows/grid-template-columns.grid-template-areascould have been an overlook.]
- They are sized using
So maybe we need a middle concept between explicit and implicit, and define things correctly.
Activity
MatsPalmgren commentedon Apr 3, 2020
My 2 cents: I suspect it's too late to make changes that affects layout, for web-compat reasons. I think we should update the spec to reflect what UAs are currently doing. IOW, I want all four bullet points above remain true; except perhaps the last one given that we recently changed that and that it only affects CSSOM, not layout.
tabatkins commentedon Apr 4, 2020
The point of distinguishing between "explicit grid" and "implicit grid" is that the explicit grid was, well, explicitly defined: it's the rows and columns that the author explicitly indicated they're planning for. Under this understading, g-t-a definitely should be considered as defining the explicit grid. Explicitly sizing the tracks isn't required under this definition, however.
So the current situation, while not quite planned for, is totally fine in my book, even if we weren't likely already constrained by web compat as Mats says.
So, yeah, we should just fix up the prose around grid-auto-rows/columns to apply to any track that isn't explicitly sized by grid-template-rows/columns.
Loirooriol commentedon Apr 6, 2020
OK, so then a grid can have:
[css-grid-1] Clarify that grid-auto-rows/columns size explicit tracks…
fantasai commentedon Jul 7, 2020
Fix checked in. Agenda+ to confirm.
fantasai commentedon Jul 7, 2020
Quick testcase to show the case under discussion
grid-auto applies to explicit rows
css-meeting-bot commentedon Jul 15, 2020
The CSS Working Group just discussed
[css-grid] Does grid-template-areas really expand the explicit grid?, and agreed to the following:RESOLVED: Accept edits to spec for explicit gridThe full IRC log of that discussion
<dael> Topic: [css-grid] Does grid-template-areas really expand the explicit grid?<dael> github: https://github.com//issues/4914
<fantasai> https://github.com//issues/4914#issuecomment-609914410
<dael> TabAtkins: Issue here is grid-template-rows/columns/areas don't haev to agree number of rows or columns expressing. You can have a template with 5 rows and only put 1.
<dael> TabAtkins: Question is what defines explicit grid. Explicit rows and columns?
<dael> TabAtkins: Browsers agree on behavior but it's not well spec. They are part of explicit grid, can detect by span to -1 line. Will fill space of grid-template-area. Sized as if implicit tracks from grid-auto-rows properites.
<dael> TabAtkins: Reasonable, want to canonicalize in spec.
<dael> TabAtkins: We checked in edits and added tests. If there's objections we can revert. Otherwise current spec has intentions. explicit grid is the larger option and if it's more than rows and columns it's sized by grid-auto
<dael> Rossen_: Thoughts or objections?
<dael> RESOLVED: Accept edits to spec for explicit grid