CSS Grid Subgrid: Aligning Nested Layouts

1. The Alignment Problem in Nested Layouts

Anyone who has not yet worked with CSS Grid Subgrid still knows the problem: a row of product cards should be aligned so that title, description, price and button all line up, even though every card has content of a different length. The classic solution was either JavaScript at runtime, position: absolute with a known height, or min-height hacks that react poorly to content changes. All of these approaches are workarounds for a problem that CSS Grid Subgrid solves declaratively in the stylesheet.

The underlying problem: in a normal CSS Grid, tracks are only calculated for the direct children of the grid container. A nested element, such as a card inside a grid cell, has no access to the tracks of the parent grid. It forms its own, independent layout system. CSS Grid Subgrid breaks through this isolation. A grid item can bind its own tracks to the tracks of the parent grid and be aligned to exactly the same lines.

The specification for CSS Grid Subgrid was in development for a long time. Firefox was the first browser to implement it, in version 71 (2019); Chrome and Edge did not follow until 2023, with version 117. Today, browser support is considered sufficient for production use, provided you accept the 2023 baseline status as a minimum requirement. The possibilities that CSS Grid Subgrid offers justify its use in all modern projects.

2. Subgrid: Basic Concept and Syntax

The syntax for CSS Grid Subgrid is minimal: a grid item that is itself meant to be a grid container receives display: grid together with grid-template-columns: subgrid or grid-template-rows: subgrid. Through this subgrid keyword, the element inherits the track definition of the nearest ancestor that is a grid container. The children of the subgrid element are now aligned to these inherited tracks instead of their own.

The important distinction: subgrid replaces the element's own track definition for the relevant axis. You can set subgrid for columns while defining your own tracks for rows, and vice versa. The element must span the parent grid's columns that it wants to bind to. A subgrid element that occupies only a single parent column can only inherit that one column, which makes little sense for individual tracks. Typical use of CSS Grid Subgrid therefore assumes a deliberately wide grid-column: span N.

/* Parent grid: defines the track structure for all card content */
.card-grid {
  display: grid;
  /* 4 columns: stretch across the full container */
  grid-template-columns: repeat(4, 1fr);
  /* 4 named row tracks for card sections */
  grid-template-rows: auto 1fr auto auto;
  gap: 1.5rem;
}

/* Each card spans all 4 column tracks via subgrid */
.card {
  display: grid;
  grid-column: span 1; /* occupies one column in the parent */
  /* Inherit parent row tracks, this is the key subgrid line */
  grid-template-rows: subgrid;
  /* Span all 4 row tracks to participate in alignment */
  grid-row: span 4;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  overflow: hidden;
}

/* Card sections now align to parent row tracks */
.card__image   { grid-row: 1; }
.card__body    { grid-row: 2; align-self: start; }
.card__price   { grid-row: 3; }
.card__actions { grid-row: 4; }

The strength of this CSS Grid Subgrid pattern lies in the separation of responsibilities: the parent container defines the track system, and the child components use it. Change the layout centrally and every card follows automatically. This architecture mirrors the principle behind design tokens: changes made in one place propagate through the entire component structure.

3. grid-template-rows and grid-template-columns with subgrid

The interplay of grid-template-rows and grid-template-columns with CSS Grid Subgrid follows symmetrical rules but is used asymmetrically in practice. Row subgrid is more common because row alignment solves the classic alignment problem: equal heights for sections with varying amounts of content. Column subgrid is used for form-like structures where labels and input fields need to align exactly on the same column lines.

Named grid lines work right through CSS Grid Subgrid. When the parent container names its rows, for example [card-start] auto [card-title] 1fr [card-price] auto [card-end], the subgrid children can be placed directly using these names: grid-row: card-title / card-price. This keeps the code readable and stable against structural changes in the track system. Anyone who changes the number of tracks only needs to adjust the named lines, not every child placement.

/* Named lines propagate into subgrid children */
.form-grid {
  display: grid;
  /* Two-column layout: labels left, inputs right */
  grid-template-columns: [label-start] max-content [label-end input-start] 1fr [input-end];
  gap: 0.75rem 1.5rem;
}

/* Each field-group spans both columns via subgrid */
.field-group {
  display: grid;
  grid-column: 1 / -1;           /* span all columns */
  grid-template-columns: subgrid; /* inherit parent column tracks */
}

/* Children use inherited named lines for precise placement */
.field-group label {
  grid-column: label-start / label-end;
  align-self: center;
  font-weight: 600;
}

.field-group input,
.field-group select {
  grid-column: input-start / input-end;
}

/* Responsive: collapse to single column on small screens */
@media (max-width: 640px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
  .field-group {
    grid-template-columns: subgrid; /* still inherits, now 1fr only */
  }
}

4. Card Layout: Cross-Component Alignment in Practice

The classic use case for CSS Grid Subgrid is a card layout with heterogeneous content. A product list contains cards with titles of varying length, differing descriptions and optional badges. Without CSS Grid Subgrid, every variable area has to be forced to a common height using CSS tricks. With CSS Grid Subgrid, the browser takes over the calculation: the row containing the title becomes as tall as the longest title among all cards in that row.

Cross-component alignment describes exactly this behavior: elements in different components align with each other even though they are separate trees in the DOM. That is the core promise of CSS Grid Subgrid. It bridges DOM encapsulation at the layout level. A single card does not need to know anything about its neighbors; the shared track system of the parent grid takes care of the alignment. This architecture scales: ten cards in a row work exactly like three.

A frequently overlooked advantage: CSS Grid Subgrid also works across multiple rows. An element that spans two rows of the parent grid can simultaneously use subgrid alignment for its own children. This enables complex, editorial-style layouts where feature cards are larger and carry more content, while smaller cards next to them remain aligned to exactly the same horizontal lines.

5. Forms and Label-Input Alignment

Forms are the second major application area for CSS Grid Subgrid. The classic problem: a form with nested fieldsets should align labels and input fields on shared column lines across all fieldsets. Until now, this required either a flat HTML structure without fieldsets or JavaScript-based width measurements. With CSS Grid Subgrid, every fieldset can align its children to the column tracks of the surrounding form grid.

The technical implementation: the form grid defines two columns, one for labels and one for inputs. Every fieldset receives display: grid; grid-column: 1 / -1; grid-template-columns: subgrid. The labels and inputs inside the fieldset are then automatically aligned to the same column lines as every other field in the form. Change the label width in the form grid and every fieldset updates instantly, with no JavaScript calculations at all.

6. Multiple Nested Subgrids

The CSS Grid Subgrid specification allows nested subgrids: a subgrid child can itself be a subgrid and propagate the tracks to the next parent grid. That sounds complex, but in certain layout scenarios it is the only elegant solution. Example: a page layout with a main grid that defines columns. A sidebar component is a subgrid of it. Inside the sidebar there are widgets that are themselves subgrid children of the sidebar, and are thereby indirectly aligned to the tracks of the page layout.

Browser implementations handle nested subgrids correctly: the child subgrid inherits the tracks of its direct parent grid, not of the grandparent grid. Anyone who wants to inherit deeper must explicitly mark every intermediate node as a subgrid. This is intentional: it prevents uncontrolled layout coupling across many levels and keeps the track system explicit and traceable at every intermediate node.

/* Three-level nested subgrid: page → section → card */
.page-layout {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* sidebar | main | aside */
  grid-template-rows: auto 1fr auto;
  gap: 2rem;
  min-height: 100vh;
}

/* Section spans main area, participates in column subgrid */
.main-section {
  display: grid;
  grid-column: 2;   /* center column */
  grid-row: 1 / -1; /* full height */
  grid-template-rows: subgrid; /* inherit page row tracks */
}

/* Card grid inside main section */
.card-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: [img] auto [title] 1fr [meta] auto [action] auto;
  gap: 1rem;
}

/* Individual card: subgrid on rows for cross-component alignment */
.card-item {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid; /* inherit card-row row tracks */
  background: white;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.card-item img   { grid-row: img; }
.card-item h3    { grid-row: title; align-self: start; }
.card-item .meta { grid-row: meta; }
.card-item .cta  { grid-row: action; align-self: end; }

7. Gap Inheritance and Named Lines

One of the more subtle behaviors of CSS Grid Subgrid is how it handles gaps. When a subgrid element inherits the tracks of the parent grid, it also inherits the gap values, unless the subgrid element explicitly defines its own gap values. This matters for the visual result: in a card layout, the internal spacing within a card is often meant to be smaller than the spacing between cards. You explicitly set the gap in the subgrid element to a smaller value or to 0 and define internal spacing via padding.

Named grid lines are another powerful tool in combination with CSS Grid Subgrid. Line names defined in the parent grid are available in every subgrid child element. This enables semantically readable placements: grid-row: content-start / content-end instead of grid-row: 2 / 4. When you change the track structure of the parent grid, you only need to adjust the named lines; every placement based on those names remains correct automatically.

8. Common Mistakes When Using Subgrid

The most common mistake with CSS Grid Subgrid: the subgrid element does not span enough tracks of the parent grid. If an element occupies only a single parent column and sets grid-template-columns: subgrid, it only inherits one column. Its children cannot be aligned across multiple columns. The fix: the subgrid element must deliberately span several parent tracks, using grid-column: 1 / -1 or grid-column: span 4.

A second common mistake: CSS Grid Subgrid requires the element itself to be a grid container (display: grid or display: inline-grid). Setting subgrid as a value for grid-template-rows or grid-template-columns without declaring display: grid has no effect. In addition, the element must be a direct child of a grid container; it inherits the tracks of its direct parent grid container, not of a more distant ancestor.

9. Subgrid in Direct Comparison

Comparing CSS Grid Subgrid with alternative alignment strategies shows why subgrid is the cleanest solution for the nested alignment problem. Every alternative has limitations that subgrid does not.

The one real drawback of CSS Grid Subgrid is the state of browser support: anyone who must support Internet Explorer or very old browsers cannot use subgrid. For everyone else, the question is not whether but when to switch to CSS Grid Subgrid. Progressive enhancement is possible: without subgrid support, cards display without perfect alignment; with support, they get the optimal version.

10. Summary

CSS Grid Subgrid solves the long-standing problem of cross-component alignment in nested layouts. With grid-template-rows: subgrid or grid-template-columns: subgrid, grid items inherit the track structure of their parent grid and can align their own children to those exact tracks. The result: card layouts with perfectly aligned sections, forms with consistent label-input columns, editorial layouts with alignment across components, all without JavaScript, without workarounds, purely declarative in CSS.

Browser support reached a critical mass in 2023: Chrome, Firefox, Safari and Edge all support CSS Grid Subgrid. Named grid lines, gap inheritance and multiple nested subgrids extend the possibilities even further. Anyone planning new CSS layouts today should consider CSS Grid Subgrid the first choice for every nested alignment problem and gradually retire the old workarounds.

11. FAQ: CSS Grid Subgrid