Subgrid
Learn nested grid inheritance with subgrid.
What is subgrid?
When you give a grid container display: grid, its children become grid items. Sometimes you want nested elements to align with the outer grid's columns and rows. grid-template-columns: subgrid does exactly that.
The subgrid value makes the inner grid inherit the outer grid's tracks instead of defining new columns. So a card's title, image, and description snap to the parent grid's column lines.
Inner grid inheritance
With subgrid, the inner element does not set up its own grid; it inherits the parent grid's row and column lines. When the parent's column widths change, the inner alignment updates automatically.
For example, in a four-column card grid each card's title and image start at the same column line as the parent. No alignment drift; the design stays consistent.
When should you use it?
subgrid is most useful for nested cards, table-like lists, and aligned form labels. Use it when you want inner elements to follow the parent grid as it resizes.
Not every nested grid needs subgrid, though. If you want an independent inner layout, defining your own columns is the right call. subgrid is an alignment tool, not a one-size-fits-all solution.
Exercise Add subgrid to a card grid
Define a grid on the .card selector. Add the declarations display: grid and grid-template-columns: subgrid. The card content will then inherit the parent grid's columns.
Show example solution
/* card columns inherit the parent grid */
.card {
display: grid;
grid-template-columns: subgrid;
}Test yourself
-
Which is the correct subgrid form?
- grid-template-columns: subgrid
- grid-template-columns: inherit
- grid-columns: sub
- subgrid: true
Show answer
grid-template-columns: subgrid — Correct. The subgrid value goes on grid-template-columns or grid-template-rows.
-
Write the subgrid value
.card { display: grid; grid-template-columns: ____; }Show answer
.card { display: grid; grid-template-columns: subgrid; }