Full-time web dev; JS lover since 2002; CSS fanatic. #CSSIsAwesome
I try to stay up with new web platform features. Web feature you don't understand? Tell me! I'll write an article!
He/him
I don't see why not! AFAIK, there's no rules about how deeply you can nest grids.
Remember that subgrid is not a new display type or anything; subgrids are still grids with display: grid, they just have a special value for their grid-template-rows and/or grid-template-columns. So anything you can do with regular grids still applies, and grids can clearly have other grids as children, since that's what subgrids are in the first place! 😁
Full-time web dev; JS lover since 2002; CSS fanatic. #CSSIsAwesome
I try to stay up with new web platform features. Web feature you don't understand? Tell me! I'll write an article!
He/him
I definitely agree, but let me add an addendum: the most amazing thing I have found in using CSS Grid, especially with the addition of display: contents, is how much less I find that I actually need to nest things at all.
In my experience, if a page implemented with, say, a Bootstrap grid winds up with 10 levels of nesting, it can usually be re-implemented with CSS Grid in like 3 levels of nesting. Templates can be flattened into these clean documents that require nesting only when the semantics call for it, rather than adding a bunch of extra nesting purely in service of layout!
So yes, nested grids with subgrid are basically the final layout puzzle piece the web has been waiting on for 30 years (though IMHO Flexbox is equally as important). But I guess my headline is, don't nest unnecessarily; try to keep everything as flat as possible, because man does it improve readability and maintainability!
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Fantastic article! Can't wait. Quick question, can a child of a subgrid be a grid too? eg: multiple nested grids?
I don't see why not! AFAIK, there's no rules about how deeply you can nest grids.
Remember that
subgridis not a new display type or anything; subgrids are still grids withdisplay: grid, they just have a special value for theirgrid-template-rowsand/orgrid-template-columns. So anything you can do with regular grids still applies, and grids can clearly have other grids as children, since that's what subgrids are in the first place! 😁It's pretty much the layout system we all need when subgrid arrives. Just nest nest nest all your grids and things should line up beautifully!
I definitely agree, but let me add an addendum: the most amazing thing I have found in using CSS Grid, especially with the addition of
display: contents, is how much less I find that I actually need to nest things at all.In my experience, if a page implemented with, say, a Bootstrap grid winds up with 10 levels of nesting, it can usually be re-implemented with CSS Grid in like 3 levels of nesting. Templates can be flattened into these clean documents that require nesting only when the semantics call for it, rather than adding a bunch of extra nesting purely in service of layout!
So yes, nested grids with subgrid are basically the final layout puzzle piece the web has been waiting on for 30 years (though IMHO Flexbox is equally as important). But I guess my headline is, don't nest unnecessarily; try to keep everything as flat as possible, because man does it improve readability and maintainability!