CSS Grid with Subgrid: When to Use It for Nested Layouts

Problem and decision

You are building a layout that must define both rows and columns, and nested children must align independently inside those tracks. A plain CSS Grid container controls the outer tracks, but its direct items cannot pass those tracks down to their own children. Flexbox handles only one axis at a time, so it cannot express a true two-dimensional grid without workarounds. CSS Grid Level 2 with subgrid lets a nested grid container inherit the parent's column or row tracks while placing its own items. Adopt this when the design requires two-dimensional control at more than one nesting level.

Constraints

• Supported browsers: Chrome 105+, Firefox 103+, Safari 15.4+
• Older browsers ignore subgrid declarations, so a fallback layout is required
• Keep the DOM shallow to limit rendering cost
• The layout must respond to viewport changes without breaking nested alignment

Option comparison

Option	Two-dimensional control	Independent nested alignment	Browser support	Complexity
CSS Grid with subgrid	Yes	Yes	Chrome 105+, Firefox 103+, Safari 15.4+	Medium
Flexbox	No (one axis)	No	All modern browsers	Low
Subgrid only	Yes	Yes	Chrome 105+, Firefox 103+, Safari 15.4+	High

Trade-offs

CSS Grid with subgrid provides independent nested alignment without extra wrapper elements for track definition, but it requires modern browsers and adds markup complexity. Flexbox is universally supported but cannot express genuine two-dimensional grids without hacks. Subgrid alone inherits tracks but does not replace explicit track sizing on the outer container.

Implementation

Add this CSS to your stylesheet. The outer container defines two columns and automatic rows with a minimum height. Each row becomes a subgrid spanning both columns, so its items align to the outer column tracks.

.outer {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-auto-rows: minmax(120px, auto);
  gap: 1rem;
}

.row {
  display: subgrid;
  grid-template-columns: subgrid;
  grid-column: 1 / 3;
  gap: 0.5rem;
}

.item {
  border: 1px solid #ccc;
  padding: 0.5rem;
}

Use this markup to create two outer rows. The first row contains two sections; the second contains one article. Because each row is a subgrid, its items can align independently within the shared column tracks.

<div class='outer'>
  <div class='row'>
    <section class='item'>One</section>
    <section class='item'>Two</section>
  </div>
  <div class='row'>
    <article class='item'>Three</article>
  </div>
</div>

Verification

Open the page in Chrome 105+, Firefox 103+, or Safari 15.4+. Open DevTools, select an element with class row, and confirm the Computed pane shows display: subgrid. Resize the viewport; the outer columns and inner items should recompute together without collapsing.

Paste this into the browser console on the page URL. It reads the computed grid value and logs whether it matches the expected template.

const expected = '1fr 2fr';
const outer = document.querySelector('.outer');
const style = getComputedStyle(outer);
console.log('grid-template-columns:', style.gridTemplateColumns);
console.log('Match:', style.gridTemplateColumns === expected);

Where to run: browser console on the target page. Required permissions: none. Expected check: the console logs the computed value and true. Risk: headless browsers may report different computed values than interactive browsers, so verify in a real browser before relying on the script.

Limitations and fallback

Subgrid is unsupported in Internet Explorer and older Edge. In those browsers, display: subgrid is ignored and the element behaves as a block-level box, which can break alignment. A practical fallback is to use a feature query that converts the row to a regular grid when subgrid is unavailable.

@supports not (display: subgrid) {
  .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

Check the result by opening the page in an older browser or by disabling subgrid in DevTools and confirming the fallback grid still stacks content sensibly. No rollback is needed because CSS is declarative and does not mutate application state.

Diagram

Grid
Row
Col
Item