Presets

Parent Grid

Subgrid Position

Start
End
Start
End

Subgrid Tracks

Alignment

Options

Save/Load

Preview

3,1
4,1
3,2
4,2
1,3
2,3
3,3
4,3
1,1
2,1
1,2
2,2
Parent Grid Subgrid Area

Grid Info

Parent Grid4 × 3
Subgrid Span2 × 2
Subgrid Positioncol 1-3, row 1-3

Generated CSS

/* Parent Grid */
.parent-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 1rem;
}

/* Subgrid Child */
.subgrid-item {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

HTML Structure

<div class="parent-grid">
  <!-- Other grid items -->
  <div class="subgrid-item">
    <div class="subgrid-child">Item 1</div>
    <div class="subgrid-child">Item 2</div>
    <div class="subgrid-child">Item 3</div>
    <div class="subgrid-child">Item 4</div>
  </div>
  <!-- More grid items -->
</div>

Subgrid Reference

What is Subgrid?

Subgrid allows a grid item to inherit its parent's grid tracks, ensuring nested elements align with the outer grid.

Key Benefits

  • Alignment across nested grids
  • Consistent gutters
  • Simpler responsive layouts
  • No duplicate track definitions

Syntax

grid-template-columns: subgrid;grid-template-rows: subgrid;

Browser Support

Supported in Chrome 117+, Firefox 71+, Safari 16+, Edge 117+