From https://drafts.csswg.org/css-grid/#implicit-grids
The grid-template-rows, grid-template-columns, and grid-template-areas properties 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-areas are explicit:
- Evidence that extra tracks from
grid-template-areas are implicit:
- They are sized using
grid-auto-columns/rows.
They are not included in the resolved value of grid-template-rows/grid-template-columns. [This was reverted due to web compat, now all tracks are included. And not including tracks created with grid-template-areas could have been an overlook.]
So maybe we need a middle concept between explicit and implicit, and define things correctly.
From https://drafts.csswg.org/css-grid/#implicit-grids
I'm not convinced about the latter. For example, consider
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 thatgrid-auto-columnsis only for implicit 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:I have tested it a bit and it seems that Chromium and Firefox are consistent in this regard:
grid-template-areasare explicit:grid-template-areasare implicit: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.]So maybe we need a middle concept between explicit and implicit, and define things correctly.