"When CSS Grid layout was first released, it came with a big asterisk: only the grid's direct children could participate in the layout. "Subgrid" is a newer addition to CSS Grid which allows us to extend the grid layout down through the DOM tree. When I first heard about subgrid, it seemed to me like a convenience, a way to make it a bit simpler to accomplish the same stuff I was already doing."
"If we check the "Grid" devtools, we see that this is a 4x2 grid, with the header spanning the first two rows: In order for this to work without subgrid, every grid participant has to be a direct child of the .grid container. Sure enough, if we inspect the HTML, we see the following structure: Semantically, this feels a bit funky to me. I feel like these images should be grouped in a list, since we're displaying a collection of portfolio pieces. Prop"
CSS Grid initially limited layout participation to a grid container's direct children. Subgrid enables descendant elements to participate in the same grid, extending grid tracks down the DOM tree. Subgrid not only simplifies some existing patterns but enables new UI layouts and more semantic markup without forcing all grid items to be direct children. Learning subgrid mechanics and common gotchas is important for effective use. Grid devtools reveal grid dimensions and spanning behavior. Subgrid addresses alignment and grouping problems, allowing nested elements to share tracks and produce cleaner, more maintainable layouts.
Read at Joshwcomeau
Unable to calculate read time
Collection
[
|
...
]