Repository navigation
[css-grid] Proposal: Ability to name grids and reference them from subgrids #1375
Description
As part of the subgrid discussion, I feel it could be very useful to name grids and reference them elsewhere. Here’s a quick top-of-mind rough sketch:
body {display: grid; grid-name: toplevel;
grid-template-columns: 1fr repeat(12, min-content) 1fr;
grid-gap: 0.5em;
}
#main section.modules > :nth-child(1) {display: subgrid toplevel;
grid-column: 2 / 4;
}
#main section.modules > :nth-child(2) {display: subgrid toplevel;
grid-column: 4 / 6;
}
This would sidestep the need to display: subgrid every element along a DOM branch. There’s precedent for naming things that are referenced elsewhere (e.g., keyframe animations) so the idea isn’t alien, though the syntactical approach here might be.
Activity
tabatkins commentedon May 15, 2017
I think this is totally separate from subgrids; this is actually asking for the ability to make arbitrary descendants into grid items, rather than just children. This, unfortunately, was explicitly rejected earlier in Grid's design, as it means you need to search arbitrarily far down to know how to layout the grid.
meyerweb commentedon May 16, 2017
Does that explicit rejection also kill an approach like this?
tabatkins commentedon May 16, 2017
That looks like the same thing, yes. (Making an arbitrary descendant into a grid item.)
fantasai commentedon Nov 6, 2017
It was rejected as “we don't think we want to do this atm”, not as “this is fundamentally incompatible with the model”. The original proposal was to do it with something like
position: namedarea, since it's a similar concept to abspos. (I think the syntax morphed a few times after Bert's initial proposal to scope the namespace.)On a related note, there was some brief consideration of multiple, overlapping named grids. We ended up with the named lines feature instead. But something to think about maybe.