[css-grid-2] Subsetting grid-template-areas in subgrids #4411
Description
Pulling out one of @MatsPalmgren's issues from #2564
@MatsPalmgren wrote:
ISSUE 4: line name matching for grid-template-areas that are (partly) outside of the bounds of the subgrid needs to be defined
The way I solved this is to view the areas themselves as sliced by the subgrid and then generate implicit area names for that slice, for example:
<div style='display:grid; grid-template-areas: "a a a a a a a a a a"'>
<div style="display:grid; grid:auto/subgrid; grid-column: 6 / span 5">
<x style="grid-column: a">x</x>
</div>
</div>Resolves to 1 / 6, because the subgrid sees a a-start line at its line 1 and a-end at line 11. That is, the areas in ancestor grids that have an edge outside the subgrid generates its corresponding implicit area name at the subgrid edge instead. This matters because for example:
<div style='display:grid; grid-template-areas: "a a a a a a a a a a"'>
<div style="display:grid; grid:auto/subgrid [a-start] [a-start]; grid-column: 6 / span 5">
<x style="grid-column: a-start 2">x</x>
</div>
</div>Resolves to 2 / 3, because the a-start of the parent grid coincides with the explicit a-start at line 1 in the subgrid.
Note that implicit area names are still generated for all grids though, so for example:
<div style="display:grid; grid-template-areas: '. . . . . . a a a a'">
<div style="display:grid; grid:auto/subgrid; grid-column:2/-1; grid-template-areas: '. . a'">
<div style="display:grid; grid:auto/subgrid; grid-column:2/-1; grid-template-areas: '. . a'">
<div style="display:grid; grid:auto/subgrid; grid-column:2/-1; grid-template-areas: '. . a'">
<x style="grid-column: a-start 4">x</x>
</div>
</div>
</div>
</div>have a-start lines at line 1 (from the outermost subgrid), line 2, line 3 (from the innermost subgrid) and line 4 (from the root grid) so a-start 4 is resolved as 4 in this case.
@fantasai replied:
ISSUE 4: This is an interesting case, I hadn't really thought about it. Named areas don't really "exist" in Grid; they're just a shorthand syntax for adding *-start and *-end line names to the grid. (Note that you can use grid-area: a solely by manually adding a-start/a-end lines to the grid, avoiding grid-template-areas entirely.) So I would have expected that we'd just inherit the -start/-end line names that happen to cross into the subgrid, without doing anything special.
If we resolve by simply ignoring the line names outside the subgrid’s spanning area, then the -start/-end lines outside the subgrid area would just get dropped. The item would then position against the subgrid's fake-implicit grid lines, and subsequently get clamped to the actual bounds of the subgrid, yielding the same behavior you propose.
@MatsPalmgren replied:
ISSUE 4: [...] Named areas don't really "exist" in Grid; they're just a shorthand syntax for adding *-start and *-end line names to the grid.
The names in grid-template-areas specifies which tracks are covered by an area, the -start/-end lines are byproduct of that...
(Note that you can use grid-area: a solely by manually adding a-start/a-end lines to the grid, avoiding grid-template-areas entirely.)
Indeed, and in a non-subgrid world I would agree that they are entirely equivalent. However, in a subgrid world, a subgridded axis "shares" the tracks with its parent grid so it seems logical to me that the names in the parent grid-template-areas are shared by the subgrid for the slice of the area that the subgrid covers. Here's a simpler example:
<div style='display:grid; grid-template-areas: "a a a a a"'>
<div style="display:grid; grid:auto/subgrid; grid-column:2/span 3">
<x style="grid-column:a-start">x</x>
</div>
</div>I think the <x> item should start at line 1 in the subgrid, because the subgrid's first track is in the "a" area (i.e. the second track in the parent grid) and thus it sees an a-start at line 1 since the "a" area, from its perspective, starts there. You're suggesting that since the parent's a-start is outside the subgrid it's invisible, hence it resolves the same as "grid-column:foo" which gives the result 3 / 4, so it doesn't give the same result. It seems we agree that a-start should match the first line in the subgrid though. I just don't understand how you get that result with your explanation. Could you elaborate?