Align the rows or columns of a nested grid to its parent's tracks. Perfect for card grids where every header, body, and footer must line up across cards. Baseline 2023
Toggle Vary content lengths to see why subgrid matters: without it, each card sizes its own tracks and rows drift out of alignment. With grid-template-rows: subgrid, every card's header/body/footer locks onto the same baseline.
Subgrid lets a nested grid inherit its parent's column or row tracks rather than defining its own. Setting grid-template-rows: subgrid on a child means its rows are placed on the parent's row lines — so sibling children share alignment.
Supported in all modern browsers since 2023 (Chrome 117+, Edge 117+, Firefox 71+, Safari 16+). For older browsers, the layout falls back to the child's own tracks.