CSS Grid Idea: Grid children spanning multiple named grid areas


Sooooo, I’m not sure that this is not possible, but I was not able to make it work in the way that I imagine it should, so that is why I am writing this article, so as to explain my idea, or how I see it working.

The Basic Idea

I would love to have the ability to place a grid child element across multiple named grid areas. I believe this is only currently possible by using grid lines as start and end points, but I find this model a little taxing on the mind when trying to create complex grid layouts containing many child elements.

Here is my example:

.grid {
grid-template-rows: repeat(8, 1fr);
grid-template-columns: repeat(8, 1fr);
grid-template-areas:
"1a 1b 1c 1d 1e 1f 1g 1h"
"2a 2b 2c 2d 2e 2f 2g 2h"
"3a 3b 3c 3d 3e 3f 3g 3h"
"4a 4b 4c 4d 4e 4f 4g 4h"
"5a 5b 5c 5d 5e 5f 5g 5h"
"6a 6b 6c 6d 6e 6f 6g 6h"
"7a 7b 7c 7d 7e 7f 7g 7h"
"8a 8b 8c 8d 8e 8f 8g 8h"
;
}

And here is the grid that we would end up with:

Here is our empty parent grid with a matrix of named grid areas.

Now, this is admittedly quite a bit of boilerplate code, but now it really easy to place any grid child element across any range of named grid areas to create very complex layouts very quickly, like so:

.grid-child-1 {
grid-area: 1a / 4d;
z-index: 1;
}
.grid-child-2 {
gird-area: 3c / 6f;
z-index: 2;
}

And here are those children elements placed across multiple named grid areas:

Here are two child elements placed across multiple named grid areas using the proposed API syntax.

This idea is modeled after a grid of streets, similar to Washington DC, USA or Sacramento, CA, USA, where streets in one direction (x-axis, maybe?) use numbers, and streets in the perpendicular direction (y-axis, maybe?) use letters, making it trivial to meet up with somebody, or find an address. For example, 2a is horizontal street 2 and vertical street a.

This + Subgrids

If this were to be combined with subgrids (which I also desperately want) where deeply nested children can be placed on the same grid as their parents and grandparents, great grandparents, etc…this could make grid insanely easy and powerful. For example:

grid-child {
grid-area: 1a / 3c;
z-index: 1;
}
grid-grand-child {
gird-area: 2b / 4d;
z-index: 2;
}
grid-great-grand-child {
grid-area: 3c / 5e;
z-index: 3;
}
grid-great-great-grand-child {
grid-area: 4d / 6f;
z-index: 4;
}
grid-great-great-great-grand-child {
grid-area: 5e / 7g;
z-index: 5;
}
grid-great-great-great-great-grand-child {
grid-area: 6f/ 8h;
z-index: 6;
}

All of those nested children are laid out on the same parent grid in possibly the easiest way that I could imagine, like so:

Nested grid child across multiple named grid areas from a distant parent grid, FTW?!? XD

The above example is admittedly a weeeeeeeee bit contrived, but I hope it can at least spark some ideas in your mind. I think this would be awesome to be able to do, of course, as markup would no longer need to be flattened so as to allow for many real world scenarios, like forms, and, well, almost everything, really :-)

When I have more time I can conjure up a more realistic example, if it would help :-)