Subgrid

Subgrid is a CSS Grid Layout feature that enables a nested grid to reuse the track definitions of its parent grid. It is designed to allow aligned, consistent layouts when grids are nested inside grid items, so inner grids can line up with the outer grid without duplicating template data.

In practice, you declare grid-template-columns: subgrid; and/or grid-template-rows: subgrid; on a grid container that sits inside another grid. The inner grid uses the parent’s explicit track list for the corresponding axis, so its columns or rows align with the outer grid’s lines. This reuses the parent grid’s sizing and spacing, while still letting the inner grid manage its own content.

Subgrid supports alignment along one or both axes. It is particularly useful for complex components or card layouts that must match the surrounding grid at multiple levels, reducing the need to redefine grid templates for each nested container. A typical usage is to set the inner grid’s columns or rows to subgrid to inherit the outer grid’s structure.

Browser support for subgrid has varied and is not yet universal. It is implemented in some browsers, with others offering limited or experimental support in certain versions. Because compatibility can change, developers should verify current status on up-to-date resources before relying on subgrid in production projects.