🧩 subgrid — Sharing Tracks Between Parent & Child Grids in CSS

🌐 What is subgrid?

subgrid is an advanced CSS Grid feature that allows a child grid to inherit the row and/or column tracks from its parent grid. This creates consistent alignment between nested components without manually duplicating sizes.

>>“subgrid lets child elements align perfectly with the parent grid — no more repeated track definitions.”

Note

🔥 Browser support: Fully supported in Firefox, partial in Safari, and currently in progress for Chrome (behind flags or experimental stage).

🎯 Why Do We Need subgrid?

  • To align nested elements exactly with the parent grid
  • To avoid repeating the same grid-template definitions in child components
  • To keep complex layouts consistent across UI sections
  • To allow children to stretch across inherited lines

📌 Syntax

Basic Syntax

.child {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

You can use subgrid for columns, rows, or both.

🧪 Example: Subgrid for Columns

Column Subgrid Example

.parent {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  gap: 20px;
}

.child {
  display: grid;
  grid-column: 1 / -1; /* span full width */
  grid-template-columns: subgrid; /* inherit parent columns */
}

The child grid’s columns will match the parent’s column sizing exactly.

📐 Visual Representation

Media content

🔥 Example: Subgrid for Rows

Row Subgrid Example

.parent {
  display: grid;
  grid-template-rows: 100px auto 80px;
  row-gap: 15px;
}

.child {
  display: grid;
  grid-template-rows: subgrid; /* inherit row tracks */
  grid-row: 2; /* placed in the second parent row */
}

Inner elements align perfectly with the parent's row structure.

🧠 How subgrid Works

FeatureBehavior
Track SizesInherited from parent
GapsInherited automatically
Child PlacementUses parent's grid lines
Child ContentStill placed inside subgrid tracks

🏗️ Practical Example — Blog Layout

A parent grid defines global structure, while subgrids align child sections such as posts.

Blog Example

.layout {
  display: grid;
  grid-template-columns: 250px 1fr 300px;
  gap: 20px;
}

.post {
  display: grid;
  grid-template-columns: subgrid; /* align post content with main grid */
  grid-column: 2; /* middle area */
}

Every blog post aligns perfectly with the site layout, without redefining column widths.

📱 Responsive Example

Responsive Subgrid

.wrapper {
  display: grid;
  grid-template-columns: 1fr;
}

.section {
  display: grid;
  grid-template-columns: subgrid;
}

@media (min-width: 900px) {
  .wrapper {
    grid-template-columns: 200px 1fr 200px;
  }
}

Subgrid adapts automatically when the parent changes track sizes.

⚠️ Common Mistakes

  • Expecting subgrid to work without the parent having explicit track definitions
  • Trying to use subgrid on non-grid containers (won't work)
  • Forgetting that Safari requires enabling experimental features
  • Expecting child elements to ignore parent gaps (they inherit them!)

Note

🧠 subgrid inherits:
✔ track sizes
✔ gaps
✔ line positions
✖ not the parent’s auto-placement of items

🆚 subgrid vs Nested Grid

FeatureNested GridSubgrid
Alignment with parentIndependent → misalignments possiblePerfectly aligned
Track duplicationRequiredNot required
Complex UIHarder to maintainEasier & consistent

🔥 Summary

subgrid is a powerful tool for creating consistent, scalable, and maintainable grid layouts. It shines in complex UIs where nested components must align perfectly across the page.

>>“With subgrid, your entire layout becomes one unified grid — from parent to child.”

Learn more →MDN Docs 📘