Subgrid
Subgrid allows a nested grid to participate in the track sizing of its parent grid. This is valuable when repeated cards need internal content aligned across the entire card collection.
Without subgrid, each card's internal grid may size independently, making cross-card alignment harder.
Subgrid Alignment
Card Subgrid
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.card {
display: grid;
grid-template-rows: subgrid;
grid-row: span 3;
}💡 The card can participate in the parent's row sizing, allowing corresponding content regions to align.
Key Takeaways
- Subgrid allows nested layouts to inherit parent grid tracks.
- It is useful for consistent alignment across repeated components.
Knowledge Check
What problem does CSS Subgrid help solve?