Skip to content

[css-grid] Does grid-template-areas really expand the explicit grid? #4914

Closed
@Loirooriol

Description

@Loirooriol

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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions