Subgrid

Subgrid is a powerful feature in CSS Grid Layout that allows nested grids to align with their parent grid, simplifying the implementation of complex layouts. It addresses the alignment challenges of traditional nested grids, resulting in cleaner code and higher maintainability.

Basic Concepts of Subgrid

Subgrid is declared using display: subgrid, enabling nested grids to inherit track definitions from their parent grid. It only works on grid containers and requires explicit declaration of either the row or column direction as a subgrid. For example:

.parent {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 20px;
}

.child {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3; /* Must span the rows of the parent grid */
}

In this example, the .child element's row tracks will fully inherit the row definitions from .parent, including gaps and track sizes.

Practical Use Cases for Subgrid

Aligning Form Layouts

Traditional form layouts require manual spacing calculations for labels and input fields, whereas subgrid automatically inherits the parent grid:

.form {
  display: grid;
  grid-template-columns: [labels] auto [controls] 1fr;
  gap: 1em;
}

.field {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 2;
}

HTML structure:

<div class="form">
  <div class="field">
    <label>Username</label>
    <input type="text">
  </div>
</div>

Synchronizing Card Content Heights

Subgrid perfectly solves the challenge of equal-height internal elements in cards:

.card-grid {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}

Special Behaviors of Subgrid

Handling Implicit Tracks

When subgrid content exceeds the parent grid's defined tracks:

• If the parent uses grid-auto-rows: auto, the subgrid creates implicit tracks
• If the parent explicitly defines grid-auto-rows, the subgrid inherits that value

.parent {
  grid-auto-rows: minmax(100px, auto);
}
.child {
  grid-template-rows: subgrid; /* Implicit tracks will be at least 100px tall */
}

Gap Inheritance Rules

Subgrid inherits the parent grid's gap values but can override them with explicit declarations:

.parent { gap: 20px; }
.child { gap: 10px; } /* Overrides parent gap */

Browser Compatibility Solutions

While subgrid is supported in modern browsers, fallbacks are necessary:

.card {
  display: grid;
  grid-template-rows: auto 1fr auto; /* Fallback */
}

@supports (grid-template-rows: subgrid) {
  .card {
    grid-template-rows: subgrid;
  }
}

Comparison with Nested Grids

Traditional nested grids require redundant track definitions:

/* Traditional approach */
.parent { grid-template-columns: 1fr 2fr; }
.child {
  display: grid;
  grid-template-columns: 1fr 2fr; /* Redundant definition */
}

/* Subgrid approach */
.child {
  display: grid;
  grid-template-columns: subgrid; /* Automatic inheritance */
}

Development Limitations

1. Unidirectional Subgrid: Can declare either row or column direction as subgrid

   /* Row-only inheritance */
   .child {
     grid-template-rows: subgrid;
     grid-template-columns: 1fr 1fr; /* Independently defined columns */
   }
   

2. Must Span Complete Tracks: Subgrid must explicitly span all parent grid tracks

   /* Incorrect example */
   .child {
     grid-template-rows: subgrid;
     grid-row: span 1; /* Insufficient parent grid rows */
   }
   

3. Named Grid Lines Are Not Inherited: Parent grid's named lines are unavailable in subgrid

Performance Considerations

For very large layouts with over 1,000 grid items, subgrid performs better than fully independent nested grids:

• Reduces style calculations: The browser computes track sizes once
• Lowers repaint costs: Alignment changes only affect a single grid

Integration with Other Layout Methods

Subgrid can be combined with Flexbox:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.grid-item {
  display: flex;
  flex-direction: column;
}

.grid-content {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
}

Debugging Tips

In Chrome DevTools:

1. Enable "Show grid" overlay when selecting a grid container
2. Subgrids are marked with dashed lines, distinct from parent grid's solid lines
3. Track sizes display inheritance relationship hints

Applications in Design Systems

When building design systems, subgrid ensures cross-component consistency:

:root {
  --grid-columns: [start] 1fr [main] 2fr [end];
}

.component {
  grid-template-columns: subgrid;
  grid-column: start / end;
}