CSS Subgrid

Imagine building a display shelf with three columns. Each column contains a card. Each card contains a heading, a paragraph, and a button. If card 1 has a very long heading, it expands vertically, but the heading in card 2 stays short. Because the cards operate independently, their headers do not align, making the shelf look untidy. CSS Subgrid solves this problem. It allows child containers to inherit the exact grid columns or rows defined by the parent grid, keeping headers, paragraphs, and buttons perfectly aligned across separate columns automatically.

In this page:

What is Subgrid?
Setting up grid-template-columns: subgrid
Setting up grid-template-rows: subgrid
Aligning Card Components
Managing Gaps and Spanning inside Subgrid

What is Subgrid?

CSS Subgrid is a value for the grid-template-columns and grid-template-rows properties. It allows nested grid items to inherit the exact tracks and spacing defined on the parent grid, keeping nested content aligned perfectly across separate columns and rows.

Note: Use Subgrid to keep card headers, text blocks, and buttons perfectly aligned across separate layout columns.

Warning: Subgrid can only inherit grid tracks from its direct parent container; you cannot inherit from grandparents.

Example: What is Subgrid?

css

<style>
.parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  background: #eef;
  padding: 10px;
}
.child {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 3;
  gap: 8px;
}
.child div {
  background: seagreen;
  color: white;
  padding: 10px;
}
</style>
<div class="parent">
  <div class="child">
    <div>A</div><div>B</div><div>C</div>
  </div>
</div>

Setting up grid-template-columns: subgrid

By applying subgrid to your columns, you tell the child container to ignore its own column properties and use the exact column widths and tracks of its parent container instead.

Note: Use column subgrid to build complex, aligned tables or dashboard grids easily.

Warning: You must define a grid column span (like grid-column: span 3) on the child element for subgrid columns to align correctly.

Example: Setting up grid-template-columns: subgrid

css

<style>
.parent {
  display: grid;
  grid-template-columns: 100px 1fr 1fr;
  gap: 8px;
  background: #eef;
  padding: 10px;
}
.child {
  display: grid;
  grid-column: span 3;
  grid-template-columns: subgrid;
  gap: 8px;
}
.child div {
  background: seagreen;
  color: white;
  padding: 10px;
}
</style>
<div class="parent">
  <div class="child">
    <div>1</div><div>2</div><div>3</div>
  </div>
</div>

Setting up grid-template-rows: subgrid

Similarly, applying subgrid to your rows tells the child container to use the exact row heights defined on the parent container, keeping nested components perfectly aligned vertically.

Note: Use row subgrids to align card headers and footer action buttons across separate columns.

Warning: Make sure you define a grid row span on the child element for subgrid rows to align correctly.

Example: Setting up grid-template-rows: subgrid

css

<style>
.parent {
  display: grid;
  grid-template-rows: 50px 50px;
  gap: 8px;
  background: #eef;
  padding: 10px;
}
.child {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  gap: 8px;
}
.child div {
  background: seagreen;
  color: white;
  padding: 4px;
}
</style>
<div class="parent">
  <div class="child">
    <div>Row 1</div><div>Row 2</div>
  </div>
</div>

Aligning Card Components

Using Subgrid is essential when building card components (like our tool cards on cookiescursor.com) that have headers, description text, and buttons, keeping them perfectly aligned horizontally across separate columns.

Note: Set both columns and rows to subgrid inside your card styles to keep your layout card grids perfectly aligned on both axes.

Warning: If your card content is too large, it can expand your parent grid tracks, affecting other cards.

Example: Aligning Card Components

css

<style>
.card {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  border: 1px solid #ccc;
  background: #fafafa;
  padding: 10px;
  gap: 6px;
}
</style>
<div class="card">
  <h3>Header</h3>
  <p>Description</p>
  <button>Buy</button>
</div>

Managing Gaps and Spanning inside Subgrid

By default, subgrids inherit the gap spacing of their parent container. However, you can easily override this behavior by defining a custom gap property on the child subgrid element to adjust spacing locally.

Note: Use custom gap settings inside your subgrid elements to customize nested column spacing locally.

Warning: Borders and padding on subgrid containers can affect child element alignments if not managed carefully.

Example: Managing Gaps and Spanning inside Subgrid

css

<style>
.parent {
  display: grid;
  gap: 20px;
  background: #eef;
  padding: 10px;
}
.child {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 2;
  gap: 4px;
}
.child div {
  background: seagreen;
  color: white;
  padding: 10px;
}
</style>
<div class="parent">
  <div class="child">
    <div>A</div><div>B</div>
  </div>
</div>

Common Mistakes

Applying subgrid columns without setting a grid-column span attribute on the child element.
Attempting to inherit subgrid tracks from a grandparent container instead of the direct parent.
Using subgrid properties on elements that are not defined inside a CSS Grid parent.

Chapter Summary

CSS Subgrid allows child containers to inherit the exact columns or rows defined on their parent grids.
Set your grid templates to subgrid (e.g. grid-template-rows: subgrid) and specify your spans on the child elements.
Use subgrids to keep card headers, paragraphs, and buttons perfectly aligned across separate columns and rows automatically.

Browser Support

Standard CSS Subgrid features are supported natively by all modern web browsers.

🔒

Chapter Quiz — Complete all 25 topics to unlock

0/25 topics done

Complete these topics first:

← Previous Lesson CSS Container Queries Next Lesson → CSS Logical Properties