CSS Subgrid Explained: 8 Real Layout Problems It Solves
Learn CSS subgrid through 8 live, editable demos — card footers, form labels, tables and more. Toggle subgrid off to see the exact bug it prevents.
CSS Subgrid Explained: 8 Real Layout Problems It Solves
Subgrid is the smallest CSS Grid feature with the biggest "oh, that's what was wrong" moment attached to it. Every developer who has built a row of cards has hit the problem it solves: three cards, three different title lengths, and three buttons that refuse to line up. For years the answers were fixed heights, JavaScript measuring loops, or quietly accepting the mess. Subgrid fixes it with one declaration — grid-template-rows: subgrid — and the idea behind it is simpler than the name suggests: a nested grid can borrow its parent's tracks instead of inventing its own . The 8 demos below are all live and interactive, and most of them have a toggle that switches subgrid off so you can see the exact layout bug it was preventing. That contrast is the whole point — subgrid is hard to appreciate in isolation and obvious the moment you turn it off. Every embed also has a Fork & Edit button that opens the exact snippet, already running, in My Code — FWD Tools' free in-b…
