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:
grid-template-areas are explicit:
grid-template-areas are implicit:
grid-auto-columns/rows.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.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.3