Skip to main content

What does subgrid do? How does subgrid differ from nested grid containers?

subgrid is a value for grid-template-columns or grid-template-rows that lets a nested element use its parent's grid instead of creating its own. It "inherits" the parent grid's lines and aligns child elements to those same lines.

The difference from a regular nested Grid container:

OptionHow it works
Nested Grid containerA new grid is created inside, unrelated to the parent's. Lines and tracks do not automatically line up.
subgridThe child element uses the same grid as the parent: shared lines, shared column/row rhythm.

The main point: subgrid is needed when you need consistent alignment of elements across different nesting levels, without manually adjusting and duplicating track sizes.

Short Answer

Interview ready
Premium

A concise answer to help you respond confidently on this topic during an interview.