CSS Academy · Lesson

Subgrid for Aligned Nested Content

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

Lesson 4 of 413 steps

Subgrid for Aligned Nested Content is a free CSS Academy lesson on CoddyKit. This is 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, and your progress syncs across the web and the CoddyKit app. The CSS Academy course includes 4 lessons in total.

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:

  <div class="card-grid">
    <div class="card">
      <div class="card-header">Header</div>
      <div class="card-body">Body</div>
      <div class="card-footer">Footer</div>
    </div>
  </div>

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:

  <div class="form-grid">
    <div class="form-section">
      <label>Name</label><input placeholder="Name" />
      <label>Email</label><input placeholder="Email" />
    </div>
  </div>

Subgrid Spans Rows and Columns

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

  <div class="layout"><div class="feature">Feature spans grid</div></div>

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:

  <div class="card-grid"><div class="card">Card content</div></div>

Quick Check

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

Answer it in the interactive lesson

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.

Free to start

Learn CSS with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 40
Lessons: 159

Start learning free View the full course

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. 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. The CSS Academy course includes 4 lessons in total.

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, so you can start here or from the beginning and move at your own pace. This is lesson 4 of 4.

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