Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
Loirooriol opened this issue Apr 2, 2020 · 6 comments
Closed

Comments

@Loirooriol
Copy link
Contributor

Loirooriol commented Apr 2, 2020

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.

@MatsPalmgren
Copy link

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
Copy link
Member

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
Copy link
Contributor Author

OK, so then a grid can have:

  1. Leading implicit tracks (implicitly sized)
  2. Explicitly sized explicit tracks
  3. Implicitly sized explicit tracks
  4. Trailing implicit tracks (implicitly sized)

fantasai added a commit that referenced this issue Jul 7, 2020
… created by grid-template-areas but not sized by grid-template-rows/columns. #4914
@fantasai
Copy link
Collaborator

fantasai commented Jul 7, 2020

Fix checked in. Agenda+ to confirm.

@fantasai
Copy link
Collaborator

fantasai commented Jul 7, 2020

Quick testcase to show the case under discussion

<!DOCTYPE html>
<style>div > div { border: double; }</style>
<div style='display: grid; border: solid; grid-template-areas: "a" "b" "c"; grid-template-rows: 10px 10px; grid-auto-rows: 40px 20px'>
<div></div><div></div><div></div><div></div><div></div><div></div>

tabatkins added a commit to web-platform-tests/wpt that referenced this issue Jul 8, 2020
@tabatkins tabatkins added the Tested Memory aid - issue has WPT tests label Jul 8, 2020
@css-meeting-bot
Copy link
Member

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 grid
The 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

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

No branches or pull requests

5 participants