Syntax
grid-template-columns: subgrid;
grid-template-rows: subgrid;Examples
Aligning Nested Content Across Cards
Without subgrid, each card's internal grid is independent - titles and buttons will not align if content lengths differ.
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto auto auto; /* title, body, footer rows */
}
.card {
display: grid;
grid-row: span 3;
grid-template-rows: subgrid; /* inherits the PARENT's row sizing */
}
/* Now every card's title, body, and footer align perfectly across the row,
even if one card's title wraps to two lines */Parameters and values
- subgrid (value for grid-template-columns/rows): Inherits track sizing from the parent grid instead of defining new tracks
Best practices
- Use subgrid specifically when nested elements need to align with the outer grid's tracks, like card components in a row that should share row heights
- The nested element must still be a grid item itself (placed via grid-row/grid-column) before subgrid can inherit those specific tracks
- Subgrid only inherits sizing for the axis you specify - use subgrid on both grid-template-columns and grid-template-rows if both need to align
- This solves alignment problems that previously required JavaScript measurement or awkward fixed-height hacks
At a glance
- Purpose
- Presentation and layout
- File extension
- .css
- Runs in
- Web browsers
- Usually used with
- HTML and JavaScript
Specifications & further reading
Related CSS documentation
Flexbox
Flexbox (Flexible Box Layout) is a powerful one-dimensional layout system in CSS that makes it easy to design flexible and responsive layouts. It provides an efficient way to distribute space and align items in a container, even when their sizes are unknown or dynamic. Flexbox is particularly useful for creating navigation bars, card layouts, and centering content.CSS Grid
CSS Grid is a powerful two-dimensional layout system that provides precise control over both rows and columns simultaneously. Unlike Flexbox which is one-dimensional, Grid excels at creating complex layouts with explicit row and column structures. It's ideal for page layouts, image galleries, and any design requiring both horizontal and vertical alignment.Flex Item Properties
While display: flex controls the container, individual flex items have their own properties for fine-grained control. flex-grow, flex-shrink, and flex-basis (usually combined via the flex shorthand) control how an item grows or shrinks to fill space. order changes visual order without touching the HTML. align-self overrides the container's align-items for a single item.grid-template-areas
grid-template-areas lets you visually lay out a grid using named regions written directly in your CSS, making complex page layouts remarkably readable. Each string represents a row, each word represents a named area, and child elements are placed into an area using grid-area, matching the visual shape of your layout with the code itself.
Flexbox (Flexible Box Layout) is a powerful one-dimensional layout system in CSS that makes it easy to design flexible and responsive layouts. It provides an efficient way to distribute space and align items in a container, even when their sizes are unknown or dynamic. Flexbox is particularly useful for creating navigation bars, card layouts, and centering content.CSS Grid
CSS Grid is a powerful two-dimensional layout system that provides precise control over both rows and columns simultaneously. Unlike Flexbox which is one-dimensional, Grid excels at creating complex layouts with explicit row and column structures. It's ideal for page layouts, image galleries, and any design requiring both horizontal and vertical alignment.Flex Item Properties
While display: flex controls the container, individual flex items have their own properties for fine-grained control. flex-grow, flex-shrink, and flex-basis (usually combined via the flex shorthand) control how an item grows or shrinks to fill space. order changes visual order without touching the HTML. align-self overrides the container's align-items for a single item.grid-template-areas
grid-template-areas lets you visually lay out a grid using named regions written directly in your CSS, making complex page layouts remarkably readable. Each string represents a row, each word represents a named area, and child elements are placed into an area using grid-area, matching the visual shape of your layout with the code itself.