This is the inner div.

It may have lots of nested stuff inside it, like blog posts or news articles.

Somewhere deep inside the content of this div, I might have an image or a table or blockquote that I want to line up with the outer grid. One example: my own site, where I have structured blog posts which often contain nested content such as figures with images, or pre-formatted code blocks.

I might want to inset using the spacer columns the inner div overlaps, or I might want to have something hang off the side, aligned with one of the outside spacer columns.

I’ve faked two examples here, which I can only do because I nailed down the spacer columns with fixed widths instead of frs or other flexible track sizing.

This is one faked example, which makes use of calc() to fake the effect.

That last example is perhaps inadvisable without support for exclusions as well, but the idea stands regardless.

This is where named grids and the ability to refer to them by name would come in very handy.

Thus, something like:

#outer {display: grid(pagecolumns);}
#inner .thing1, #inner .thing2 {display: pagecolumns;}

This would remove the need for doing a whole chain of display: subgrid styles on all the elements between the subgridded element and the actual grid being used. It would also avoid forcing all the other contents of those parent elements into the grid, which might not be desirable. (Probably wouldn’t be, in most cases. The same is true for the display: contents hack.)