CSS Grid Idea: Grid children spanning multiple named grid areas
Disclaimer: Sooooo, this is a technique that does NOT currently work with CSS Grid, but I would love to see this functionality added to CSS grid in the future. Onward and upward…
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-template-rows: repeat(8, 1fr);
grid-template-columns: repeat(8, 1fr);
"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:
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-area: 1a / 4d;
gird-area: 3c / 6f;
And here are those children elements placed across multiple named grid areas:
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-area: 1a / 3c;
gird-area: 2b / 4d;
grid-area: 3c / 5e;
grid-area: 4d / 6f;
grid-area: 5e / 7g;
grid-area: 6f/ 8h;
All of those nested children are laid out on the same parent grid in possibly the easiest way that I could imagine, like so:
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 :-)