[css-grid] Proposal: Ability to name grids and reference them from subgrids

[meyerweb]

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.

[tabatkins]

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]

Does that explicit rejection also kill an approach like this?

body {display: grid; grid-name: toplevel;
     grid-template-columns: 1fr repeat(12, min-content) 1fr;
     grid-gap: 0.5em;
     }
#main section.modules > figure:nth-child(1) {display: subgrid toplevel;}
#main section.modules > figure:nth-child(1) img {grid-column: 1 / 2;}
#main section.modules > figure:nth-child(1) figcaption {grid-column: 2 / 3;}

[tabatkins]

That looks like the same thing, yes. (Making an arbitrary descendant into a grid item.)

[fantasai]

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.