Nested Grids and the Subgrid Property

As you build more complex layouts with CSS Grid, you often need to structure content within content—placing grids inside other grids. This is known as nested grids. In a nested grid, a grid container is placed inside a grid item, creating an independent grid context for its children. While this approach provides flexibility, it can lead to inconsistent alignment between parent and child grids.

To address alignment challenges, CSS introduces the subgrid property. When you use subgrid as a value for grid-template-rows or grid-template-columns, the child grid inherits its sizing and track definitions from the parent grid. This ensures that nested content lines up perfectly with the parent grid's tracks, maintaining visual consistency across complex layouts.

When to Use Subgrid Versus Independent Nested Grids

Choose subgrid when you need child elements to align precisely with the parent grid's columns or rows. This is especially valuable for card layouts, multi-level navigation, or any design where visual alignment across components is essential. Rely on independent nested grids when the child grid's tracks, gaps, or alignment should differ from the parent, or when browser support for subgrid is insufficient for your project requirements.