subgrid

when you add display: grid to a grid container, only the direct children become grid items and can then be placed on the grid you created. the children of these items display in normal flow.

you can "nest" grids by making a grid item a grid container. these grids, however, are independent of the parent grid and of each other, meaning that they do not take their track sizing from the parent grid. this makes it difficult to line nested grid items up with the main grid.

if you set the value subgrid on grid-template-columns, grid-template-rows or both, instead of creating a new track listing the nested grid uses the tracks defined on the parent.

without subgrid

with subgrid

browser support