CSS Academy · Lesson

Subgrid for Aligned Nested Content

Use subgrid to align nested grid items to the parent grid's tracks.

Subgrid for Aligned Nested Content is a free CSS Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

The Subgrid Problem

A common challenge: you have a grid of cards, each with a header, body, and footer. Without subgrid, items in different cards cannot align to the same baselines because each card is its own independent layout.

What is Subgrid?

subgrid is a value for grid-template-columns or grid-template-rows that makes a nested grid inherit and participate in the parent grid's track definitions.

grid-template-rows: subgrid

A grid item that is also a grid container can use subgrid to align its children with the parent grid tracks:

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr auto; /* header content footer */
  gap: 24px;
}

.card {
  grid-row: span 3; /* occupies all 3 rows */
  display: grid;
  grid-template-rows: subgrid; /* inherits parent row tracks */
}

.card-header { /* row 1 */ }
.card-body   { /* row 2, flex: 1 */ }
.card-footer { /* row 3 */ }

grid-template-columns: subgrid

Similarly, subgrid on columns allows nested items to align to parent column tracks — useful for aligned label-value pairs or form fields across card columns.

Subgrid vs align-content

Without subgrid, you can partially align content using align-content or fixed heights, but this is fragile. Subgrid enables true alignment driven by actual content heights.

Subgrid for Form Alignment

Aligning label-input pairs across multiple form columns:

.form-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
}

.form-section {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid; /* aligns with parent columns */
}

Subgrid Spans Rows and Columns

A subgrid can span multiple parent tracks and inherit tracks from both directions:

.feature {
  grid-column: 1 / -1;
  grid-row: span 2;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

Named Areas with Subgrid

When a subgrid inherits named tracks from the parent, those names are available for placement inside the subgrid container.

Gap Inheritance

Subgrids inherit the parent grid's gap values by default. The nested grid participates in the same gutter system.

Browser Support Note

Subgrid has been available in Firefox since 2019. Chrome added support in 2023. All modern browsers now support it. Verify support for your target audience before using in production.

Progressive Enhancement with Subgrid

Provide a fallback for older browsers using fixed heights or Flexbox alignment before adding subgrid as an enhancement:

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

Quick Check

What does grid-template-rows: subgrid on a grid item do?

Recap

Subgrid solves the alignment problem for nested grid content like card grids where items in separate cards need to align to the same baseline. Use grid-template-rows: subgrid on grid items that span multiple rows, and grid-template-columns: subgrid for column-aligned nested content. Modern browser support is now universal.

Frequently asked questions

Is the “Subgrid for Aligned Nested Content” lesson free?

Yes — the full text of “Subgrid for Aligned Nested Content” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “Subgrid for Aligned Nested Content”?

Use subgrid to align nested grid items to the parent grid's tracks. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start CSS Academy?

No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Subgrid for Aligned Nested Content” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this CSS Academy lesson?

Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to CSS Academy