What is CSS Subgrid: Definition, Example, and Usage

The subgrid value in CSS allows a nested grid to inherit the column or row structure of its parent grid. This means the child grid aligns perfectly with the parent grid's tracks, making complex layouts easier to manage and consistent. It is used inside a grid container to share grid lines between parent and child.

How It Works

Imagine you have a big grid layout like a city map with streets (columns and rows). Normally, if you create a smaller grid inside one block of the city, it makes its own streets independently. This can cause misalignment between the big grid and the small grid.

Using subgrid is like letting the smaller grid use the same streets as the big city map. The nested grid shares the exact column or row lines of the parent grid, so everything lines up perfectly without extra calculations.

This helps when you want nested items to align exactly with the outer grid's structure, making your layout cleaner and easier to maintain.

Example

This example shows a parent grid with three columns. The child grid uses subgrid for columns, so its items align exactly under the parent's columns.

css

div.parent {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  gap: 10px;
  background: #eee;
  padding: 10px;
}

div.child {
  display: grid;
  grid-template-columns: subgrid;
  gap: 5px;
  background: #cce;
  padding: 5px;
}

.parent > div {
  background: #88a;
  color: white;
  padding: 10px;
  text-align: center;
}

.child > div {
  background: #446;
  color: white;
  padding: 5px;
  text-align: center;
}

Output

<div class="parent">
  <div>Parent 1</div>
  <div class="child">
    <div>Child 1</div>
    <div>Child 2</div>
    <div>Child 3</div>
  </div>
  <div>Parent 3</div>
</div>

When to Use

Use subgrid when you want nested grids to line up exactly with their parent grid's columns or rows. This is helpful in complex layouts like forms, calendars, or dashboards where alignment is important.

For example, if you have a form with labels and inputs arranged in a grid, and inside one input you want another grid of buttons or options, subgrid helps keep everything aligned without extra work.

It reduces the need to manually match grid sizes and gaps, making your CSS simpler and your layout more consistent.

Key Points

• Subgrid lets a nested grid share the parent's grid lines.
• It works only inside a grid container.
• You can use it for columns, rows, or both.
• It improves alignment and layout consistency.
• Browser support is growing but check compatibility before use.

Key Takeaways

subgrid allows nested grids to align perfectly with their parent grid's structure.

It simplifies complex layouts by sharing grid lines instead of creating independent tracks.

Use subgrid for nested grids in forms, dashboards, or any aligned multi-level grid layout.

Browser support is improving, but verify before using in production.

It works only inside elements with display: grid.