1. Home
2. web
3. Perfect Alignment with CSS Grid Subgrid

Introduction

Aligning nested components across columns in card layouts is a common layout challenge in responsive web design.

While CSS Grid and Flexbox make it easy to equalise the height of sibling card containers, aligning the internal elements (such as headers, body copy, and CTA buttons) remains difficult. If one card has a multi-line title and another has a single line, the following elements will misalign, resulting in an inconsistent UI.

The CSS Grid subgrid feature resolves this layout limitation. This guide explains how subgrid works and shares styling strategies to build aligned grid cards.

1. The Limitation of Nested CSS Grids

Let’s look at the limitations of aligning nested elements without using the subgrid parameter.

HTML Structure

<div class="grid-container">
  <div class="card">
    <h3 class="card-title">Short Title</h3>
    <p class="card-desc">Short description text.</p>
    <button class="card-btn">Read More</button>
  </div>
  <div class="card">
    <h3 class="card-title">Extremely Long and Complex Multi-line Card Title</h3>
    <p class="card-desc">This card contains long body copy that wraps across multiple lines.</p>
    <button class="card-btn">Read More</button>
  </div>
</div>

The Traditional Flexbox/Grid Workaround

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

.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Pushes button to bottom */
}

• The Problem: The card containers themselves align to equal heights, and the buttons sit at the bottom. However, the bottom edge of the titles and the start of the description paragraphs are not aligned. Because one title is longer, the description text below it starts lower than the description in the neighboring card, breaking layout consistency.

2. Resolving Alignment Issues with subgrid

With subgrid, nested grid containers inherit the row and column tracks defined on their parent grid container.

This means sibling card elements can share the same grid track definitions. The titles across all cards share a single grid row, and the description text blocks share another, aligning them perfectly.

The Subgrid CSS Implementation

/* 1. Define the grid tracks, including nested rows, on the parent container */
.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* The parent container handles rows dynamically */
  gap: 20px;
}

/* 2. Configure the card to inherit parent row alignments using subgrid */
.card {
  display: grid;
  /* Tell the card to inherit parent row definitions */
  grid-template-rows: subgrid;
  /* Instruct the card to span 3 rows defined on the parent grid */
  grid-row: span 3;
  
  gap: 10px;
  background: #f9f9f9;
  padding: 15px;
  border-radius: 8px;
}

/* 3. Assign internal items to specific rows */
.card-title {
  grid-row: 1; /* Row 1 */
}
.card-desc {
  grid-row: 2; /* Row 2 */
}
.card-btn {
  grid-row: 3; /* Row 3 */
}

Why This Works

Setting grid-template-rows: subgrid instructs each .card to align its internal elements directly to the parent grid container’s rows.

The height of row 1 (the title row) automatically expands to fit the tallest card title in that row. This ensures the descriptions in row 2 start at the exact same vertical alignment, regardless of title length.

3. Horizontal Column Alignment Examples

You can also apply subgrid horizontally to align column tracks.

For example, when building forms, you can align labels and input fields across multiple rows even if the text length of the labels varies.

.form-row {
  display: grid;
  grid-template-columns: subgrid; /* Inherits the parent grid column proportions */
  grid-column: span 2;
}

This aligns all input fields horizontally across rows without requiring you to define hardcoded widths for the label elements.

Conclusion & Browser Support

CSS Grid subgrid is fully supported across all modern browsers, including Safari, Firefox, Chrome, and Edge.

Implementing subgrid removes the need for JavaScript-based height matching and complex Flexbox margins.

Use subgrid in your layouts to align nested components and improve the consistency of your card designs.