CSS Grid revolutionized how web layouts are structured. However, a common challenge remained: aligning nested items (grandchild elements) inside parent Grid Items to the main grid lines.

This was resolved with the introduction of CSS Subgrid, a specification update for CSS Grid Layout. This article explains the fundamentals of CSS Subgrid and how to apply it to common layout problems like card lists.

1. What is CSS Subgrid?

Traditionally, only direct children of a Grid container can be positioned along the defined grid tracks. When you declare another grid inside a Grid Item, that nested grid is completely isolated from the outer parent grid.

Consider a standard “product card” layout:

• Each card contains an image, a title, and a description.
• Titles vary in length, with some spanning multiple lines.

Using traditional CSS Grid, aligning the card headers or card descriptions horizontally across cards required fixed heights, magic margins, or JavaScript recalculations.

Subgrid solves this by letting nested grid containers inherit the column and/or row tracks defined in the parent container, linking their structural alignment.

2. Practical Guide: Aligning Card Heights with Subgrid

Let us implement a responsive grid where nested card elements align their content blocks dynamically.

HTML Structure

<div class="grid-container">
  <!-- Card 1 -->
  <div class="card">
    <img src="thumb1.jpg" alt="Thumbnail">
    <h3>Short Title</h3>
    <p>A brief description goes here.</p>
  </div>
  <!-- Card 2 -->
  <div class="card">
    <img src="thumb2.jpg" alt="Thumbnail">
    <h3>This is a very long title spanning multiple lines</h3>
    <p>A longer description to showcase how the heights align.</p>
  </div>
</div>

CSS Implementation

/* Parent Container Grid */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

/* Card Styling integrating Subgrid */
.card {
  display: grid;
  /* Card spans 3 rows in the parent grid */
  grid-row: span 3;
  /* Configure fallback values */
  grid-template-rows: auto auto 1fr;
  row-gap: 10px;
}

/* Apply Subgrid when supported */
@supports (grid-template-rows: subgrid) {
  .card {
    grid-template-rows: subgrid;
  }
}

How the Code Works

• By specifying grid-row: span 3;, we instruct each card to occupy exactly three rows of the parent container grid.
• The grid-template-rows: subgrid; declaration inherits the row definitions of the parent grid.
• Even if Card 2’s header wraps to three lines and expands, Card 1’s header automatically matches that height because both titles share the same virtual row track of the parent.

3. Summary: Modern Layout with Subgrid

CSS Subgrid is fully supported by all major modern browsers (Chrome, Edge, Firefox, Safari). It eliminates the need for brittle JavaScript height matchers and allows designers to construct pixel-perfect, flexible grid layouts. Use it in product grids, dashboard widgets, and magazine layouts to elevate your frontend UI designs.