4 min read
•Question 40 of 49hardWhat is CSS Subgrid?
Understanding nested grid alignment with subgrid.
What You'll Learn
- What subgrid is
- Aligning nested grids
- Use cases
The Problem
Nested grids don't align with parent grid tracks by default.
Subgrid Solution
styles.cssCSS
.parent {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 20px;
}
.child {
grid-column: span 3;
display: grid;
grid-template-columns: subgrid; /* Inherits parent columns */
}Both Axes
styles.cssCSS
.child {
display: grid;
grid-template-columns: subgrid;
grid-template-rows: subgrid;
}Use Case: Card Grid
styles.cssCSS
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.card {
display: grid;
grid-template-rows: subgrid;
grid-row: span 3; /* Header, content, footer */
}
/* All card headers align, all footers align */