Skip to content

Navigation Menu

Sign in
Appearance settings
Sign up
Appearance settings

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

Copy link
Copy link

Description

@Loirooriol
Issue body actions

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.

Reactions are currently unavailable

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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

      Morty Proxy This is a proxified and sanitized view of the page, visit original site.