CSS Grid has completely changed how we build web layouts, but one common pain point has always been nested grids. Historically, if you had a nested grid item, its columns and rows were entirely independent of the parent grid. This made aligning nested content with the main layout frustratingly difficult. Enter
What is CSS Subgrid?
How It Works
To use a subgrid, the child element must already be a grid item. You then set its display property to
Here is a quick example:
Key Benefits
1. Perfect Alignment: Elements nested deep inside your markup can now line up perfectly with the page's main grid tracks.
2. Dynamic Content: If the parent grid tracks resize based on content, the subgrid tracks resize right along with them.
3. Cleaner Code: No more hacky calc() functions or fixed pixel widths trying to fake alignment across nested components.
Browser Support and Fallbacks
Modern browser support for subgrid is quite robust now across Chrome, Firefox, and Safari. However, if you need to support older browsers, it is always a good idea to provide a fallback using
Subgrid bridges the gap between complex component structures and global page layouts. If you haven't played around with it yet, spin up a CodePen and give it a try on your next card-based layout.
subgrid.What is CSS Subgrid?
subgrid is a value for grid-template-columns and grid-template-rows that allows a nested grid to inherit the track definitions of its parent grid. Instead of defining a brand new grid track inside a child element, you tell the child to use the tracks created by its parent.How It Works
To use a subgrid, the child element must already be a grid item. You then set its display property to
grid and define either the columns, rows, or both, as subgrid.Here is a quick example:
CSS:
.parent-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.card {
/* This spans across 2 columns of the parent */
grid-column: span 2;
/* Make the card itself a grid, adopting the parent's columns */
display: grid;
grid-template-columns: subgrid;
}Key Benefits
1. Perfect Alignment: Elements nested deep inside your markup can now line up perfectly with the page's main grid tracks.
2. Dynamic Content: If the parent grid tracks resize based on content, the subgrid tracks resize right along with them.
3. Cleaner Code: No more hacky calc() functions or fixed pixel widths trying to fake alignment across nested components.
Browser Support and Fallbacks
Modern browser support for subgrid is quite robust now across Chrome, Firefox, and Safari. However, if you need to support older browsers, it is always a good idea to provide a fallback using
@supports:
CSS:
.card {
display: grid;
grid-template-columns: 1fr 1fr; /* Fallback */
}
@supports (grid-template-columns: subgrid) {
.card {
grid-template-columns: subgrid;
}
}Subgrid bridges the gap between complex component structures and global page layouts. If you haven't played around with it yet, spin up a CodePen and give it a try on your next card-based layout.
