css - CSS Subgrid Layout

CSS Subgrid is an advanced feature of CSS Grid Layout that allows nested grid items to inherit and align with the rows or columns of a parent grid container. It solves one of the biggest limitations in traditional CSS Grid where child grids behave independently and cannot directly align with the parent grid tracks.

Subgrid is especially useful when building complex layouts such as dashboards, magazine-style pages, cards with aligned content, forms, and responsive web applications.

Understanding the Problem Before Subgrid

In a normal CSS Grid layout, when a grid item becomes a grid container itself, it creates a completely new grid structure. The nested grid does not automatically align with the tracks of the parent grid.

Example:

<div class="parent">
  <div class="card">
    <h2>Title</h2>
    <p>Description</p>
    <button>Read More</button>
  </div>
</div>

.parent {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  gap: 20px;
}

.card {
  display: grid;
}

In this situation:

The parent has its own columns
The child grid creates separate rows and columns
Alignment between parent and child becomes difficult

This often causes inconsistent spacing and uneven layouts.

What is Subgrid?

Subgrid allows a child grid container to use the same grid tracks defined by its parent.

Instead of defining new rows or columns inside the child grid, the child adopts the parent’s grid structure.

Syntax:

grid-template-columns: subgrid;

grid-template-rows: subgrid;

Basic Example of Subgrid

HTML

<div class="container">
  <div class="card">
    <h2>Article Title</h2>
    <p>Some description text.</p>
    <button>Read More</button>
  </div>

  <div class="card">
    <h2>Longer Article Title Example</h2>
    <p>
      This card contains more content and demonstrates alignment.
    </p>
    <button>Read More</button>
  </div>
</div>

CSS Without Subgrid

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.card {
  display: grid;
  padding: 20px;
  border: 1px solid gray;
}

Problem:

Each card sizes its rows independently
Buttons may appear at different heights
Content alignment becomes inconsistent

CSS With Subgrid

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto auto auto;
  gap: 20px;
}

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  padding: 20px;
  border: 1px solid gray;
}

Now:

Both cards share the same row structure
Titles align perfectly
Paragraphs align consistently
Buttons appear at the same position

How Subgrid Works

Subgrid inherits:

Track sizes
Grid lines
Gaps from the parent grid

It does not create independent tracks.

The child grid becomes connected to the parent’s layout structure.

Subgrid for Columns

You can inherit parent columns.

Example:

.child {
  display: grid;
  grid-template-columns: subgrid;
}

This means the child uses the same column widths as the parent.

Subgrid for Rows

You can inherit rows.

Example:

.child {
  display: grid;
  grid-template-rows: subgrid;
}

Useful for equal vertical alignment across nested components.

Using Both Rows and Columns

.child {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

This fully connects the nested grid to the parent grid system.

Real-World Example: Form Alignment

Without subgrid, labels and input fields may become misaligned.

HTML

<form class="form-grid">
  <div class="field">
    <label>Name</label>
    <input type="text">
  </div>

  <div class="field">
    <label>Email Address</label>
    <input type="email">
  </div>
</form>

CSS

.form-grid {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 15px;
}

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

Benefits:

Labels stay aligned
Inputs remain consistent
Easier responsive design

Subgrid and Responsive Design

Subgrid greatly improves responsive layouts because nested components automatically adapt to parent track changes.

Example:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

Child grids using subgrid automatically follow updated column sizes.

This reduces repeated CSS rules.

Advantages of CSS Subgrid

1. Consistent Alignment

Nested elements align perfectly with parent layouts.

2. Cleaner Code

You avoid repeating track definitions in child grids.

Without subgrid:

.child {
  grid-template-columns: 1fr 2fr 1fr;
}

With subgrid:

.child {
  grid-template-columns: subgrid;
}

3. Easier Maintenance

Updating parent tracks automatically updates nested layouts.

4. Better Complex Layouts

Very useful for:

Dashboards
Article layouts
Product cards
Admin panels
Forms
Tables

5. Improved Design Consistency

Keeps spacing and alignment visually balanced.

Limitations of Subgrid

1. Requires Parent Grid

Subgrid only works inside a grid container.

2. Browser Support

Modern browsers support subgrid, but older browsers may not.

Current strong support includes:

Firefox
Chrome
Edge
Safari (modern versions)

Older browsers may require fallback layouts.

3. Can Be Complex

Large nested grids may become difficult to debug.

Careful planning is important.

Difference Between Grid and Subgrid

Feature	CSS Grid	CSS Subgrid
Creates own tracks	Yes	No
Independent layout	Yes	No
Inherits parent tracks	No	Yes
Best for	Standalone layouts	Nested aligned layouts

Best Practices

Use Subgrid for Shared Alignment

Ideal when nested elements must visually line up.

Avoid Over-Nesting

Too many nested grids reduce readability.

Combine with Modern Grid Features

Subgrid works well with:

minmax()
auto-fit
auto-fill
responsive layouts

Provide Fallbacks

For older browsers:

.child {
  grid-template-columns: 1fr 1fr;
  grid-template-columns: subgrid;
}

Older browsers use the first rule.

Example of a Magazine Layout

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

.article {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 6;
}

Benefits:

Headlines align across articles
Images stay balanced
Text columns remain consistent

When to Use Subgrid

Use subgrid when:

Nested content must align with parent tracks
Building reusable layout components
Creating complex responsive interfaces
Maintaining consistent spacing

Avoid subgrid when:

Child layout should remain independent
Simple layouts do not require shared alignment

Conclusion

CSS Subgrid is a powerful enhancement to CSS Grid that enables nested grids to inherit the layout structure of parent grids. It eliminates alignment issues that occur in traditional nested grid systems and simplifies the creation of professional, consistent, and responsive layouts.

By using subgrid, developers can reduce repetitive code, improve maintainability, and build advanced layouts with better visual consistency across complex web applications.