Subgrid lets a nested grid use the track sizing of its parent in one or both dimensions. It solves alignment across nested card content that ordinary independent grids cannot guarantee.
Make this comfortable
CSS subgrid: align nested card content to shared tracks
How the rule works
A receipt comparison shows several cards, each with a title, detail, and action. Titles wrap at different lengths, yet the actions should align across a row. Make the outer group a grid with repeated rows, and let each card span and adopt those row tracks. The cards remain separate HTML records; CSS only lines up their visual tracks. The sample uses a three-row subgrid and should be applied to a known row of cards. In a larger responsive grid, row spans and implicit rows need careful review. Do not use subgrid to force semantic order or to hide missing content. Check a card with a two-line title, a missing optional note, and large type.
.receipt-comparison {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
grid-template-rows: repeat(3, auto);
gap: 1rem;
}
.receipt-comparison__card {
display: grid;
grid-row: span 3;
grid-template-rows: subgrid;
border: 1px solid #b7c4d1;
padding: 1rem;
}Cost and verification
Track sizing may depend on the longest content in the set, so a single unbroken token can make the shared row too tall or wide. Bound and wrap user-supplied content. A fallback can use independent card grids with actions pushed to the end; exact cross-card alignment is a progressive enhancement. Subgrid adds layout relationships, not new bytes or requests. It is useful only when the shared tracks are a real design requirement, since it adds a coupling between parent and child layout definitions.
Common Mistakes
- Do not expect subgrid to align cards that are in different parent grids.
- Do not leave the card's row span inconsistent with the parent track plan.
- Do not reorder content merely to align action buttons.
Connected lessons
css
layout
web