I’d say 85% of my grid usage is in one of these two categories…
- I just need some pretty basic (probably equal width) columns that ends up being something like like
grid-template-columns: repeat(3, minmax(0, 1fr));to be safe.
- Actually doing some real layout where five minutes in I realize I’d really like
Subgrid? It’s a nice intuitive way to have a child element on the grid inherit relevant grid lines from the parent grid.
Here’s a great recent video from Rachel Andrew covering it. Last year, we linked up her talk on the same! It’s such a clutch feature and I wish we could rely on it cross-browser. Right now, Firefox is the only one that has it. (Chrome issue, Safari issue)
In my recent video, right about at 20 minutes, I realize subgrid would make even a fairly simple layout much nicer, like removing the need for variables or resorting to magic numbers.
Here’s another video of Dave and I literally building a layout with subgrid:
Absolute must if you care about a semantic file structure. Working with the
tag now becomes quite problematic without sub grids.
display: contents could help in some cases.