Subgrid is here. What it actually replaces
Not "grid, but nested". Subgrid replaces the hacks you wrote to line up things that are not siblings.
Every card grid eventually meets the same problem: three cards, three titles of different lengths, and three buttons that no longer line up. The old fixes were fixed heights, line clamping, or giving up.
Subgrid lets the card share the parent’s row tracks, so the titles align because they are genuinely in the same row, not because you guessed a height.
Key takeaways
- Reach for it when children of different parents need to align.
- It replaces fixed heights and line clamping, not nested grid.
- Support is good enough to use without a fallback on most audiences. Check yours.
Comments
2 Newest firstOne gotcha: the subgrid child has to be a grid item of the parent, not a wrapper inside one. Cost me an afternoon.
We had a line-clamp hack in that exact spot for two years. Deleted forty lines of CSS and the cards line up properly for the first time.