CSS Subgrid - Sharing Grids with Descendants

Imagine the Great Pyramid of Giza. Its construction is based on a precise grid of stone blocks that permeates all layers of the structure - from the foundations, through the chambers, to the summit. Each inner chamber is perfectly aligned with the outer structure. This is exactly how CSS Subgrid works - it allows child elements to inherit and share their parent's grid, ensuring perfect alignment at all levels of nesting.

The Problem Subgrid Solves

Without subgrid, when you create a nested grid, the child element creates its own independent grid. It's like building a smaller pyramid inside the great pyramid, but without maintaining alignment with the main blocks.

Consider a typical example - a card grid where each card has a header, body, and footer. We want the headers of all cards to be aligned, the bodies aligned, and the footers aligned - regardless of how much text is in each section.

Without Subgrid - The Alignment Problem

1.grid {
2  display: grid;
3  grid-template-columns: repeat(3, 1fr);
4  gap: 1.5rem;
5}
6
7/* Each card has its OWN grid - no alignment between cards! */
8.card {
9  display: grid;
10  grid-template-rows: auto 1fr auto;
11}

In this case, one card's header may be taller than another, causing the body and footer not to align on the same line. It's like the inner chambers of a pyramid not matching the outer block grid.

With Subgrid - Perfect Alignment

1.grid {
2  display: grid;
3  grid-template-columns: repeat(3, 1fr);
4  /* Define shared rows for ALL cards */
5  grid-template-rows: subgrid;
6  gap: 1.5rem;
7}
8
9.card {
10  display: grid;
11  /* Card INHERITS rows from parent */
12  grid-template-rows: subgrid;
13  /* Card spans 3 rows of the parent */
14  grid-row: span 3;
15}

Now the headers, bodies, and footers of all cards are perfectly aligned - because they all share the same row grid.

Subgrid Syntax

Subgrid is used as a value for grid-template-columns or grid-template-rows (or both):

1/* Subgrid for columns only */
2.child {
3  display: grid;
4  grid-template-columns: subgrid;
5}
6
7/* Subgrid for rows only */
8.child {
9  display: grid;
10  grid-template-rows: subgrid;
11}
12
13/* Subgrid for both axes */
14.child {
15  display: grid;
16  grid-template-columns: subgrid;
17  grid-template-rows: subgrid;
18}

The child element must:

1. Have display: grid
2. Be a direct child of a grid element
3. Span at least 2 tracks in the axis where it uses subgrid

Practical Example: Card Layout

1.gallery {
2  display: grid;
3  grid-template-columns: repeat(3, 1fr);
4  gap: 1rem;
5}
6
7.card {
8  display: grid;
9  /* Inherit parent columns - not needed here since card spans 1 column */
10  /* Inherit ROWS - useful here */
11  grid-row: span 3;
12  grid-template-rows: subgrid;
13  border: 2px solid #d4af37;
14  border-radius: 8px;
15  overflow: hidden;
16}
17
18.card-header {
19  background: #8b6914;
20  color: white;
21  padding: 1rem;
22}
23
24.card-body {
25  padding: 1rem;
26}
27
28.card-footer {
29  padding: 1rem;
30  background: #f5f1e3;
31  border-top: 1px solid #d4af37;
32  align-self: end;
33}

Subgrid vs Regular Nested Grid

The key difference lies in track sharing:

1/* Regular nested grid - INDEPENDENT grid */
2.parent {
3  display: grid;
4  grid-template-columns: 200px 1fr 200px;
5}
6
7.child-normal {
8  grid-column: 1 / -1;
9  display: grid;
10  /* Creates its own 3-column grid, but SIZES may differ */
11  grid-template-columns: 200px 1fr 200px;
12}
13
14/* Subgrid - SHARED grid */
15.child-subgrid {
16  grid-column: 1 / -1;
17  display: grid;
18  /* Uses EXACTLY the same columns as parent */
19  grid-template-columns: subgrid;
20}

With regular nesting, the 200px values in child and parent can differ (e.g., due to gap). Subgrid guarantees exact matching, because the child literally uses the same grid lines as the parent.

Subgrid Use Cases

1. Forms with Aligned Labels

1.form {
2  display: grid;
3  grid-template-columns: 150px 1fr;
4  gap: 0.75rem 1rem;
5}
6
7.form-row {
8  display: grid;
9  grid-column: 1 / -1;
10  grid-template-columns: subgrid;
11  align-items: center;
12}
13
14.form-row label {
15  text-align: right;
16  color: #8b6914;
17}

2. Gallery with Two-Axis Subgrid

1.mosaic {
2  display: grid;
3  grid-template-columns: repeat(4, 1fr);
4  grid-template-rows: repeat(3, 200px);
5  gap: 0.5rem;
6}
7
8.mosaic-item-large {
9  grid-column: span 2;
10  grid-row: span 2;
11  display: grid;
12  grid-template-columns: subgrid;
13  grid-template-rows: subgrid;
14}

Browser Support

Subgrid gained full support in all major browsers in 2023 (Chrome 117, Firefox 71, Safari 16). You can safely use it in modern projects, optionally with a fallback:

1.card {
2  display: grid;
3  /* Fallback - own grid */
4  grid-template-rows: auto 1fr auto;
5}
6
7@supports (grid-template-rows: subgrid) {
8  .card {
9    grid-row: span 3;
10    grid-template-rows: subgrid;
11  }
12}

Subgrid is one of the most important additions to CSS Grid, solving real problems with element alignment in nested grids. Like the precise grid of stone blocks in the Pyramid of Cheops - it ensures perfect alignment at every level of construction.

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>CSS Subgrid</title>
6    <link rel="stylesheet" href="style.css">
7</head>
8<body>
9    <h1>CSS Subgrid - Gallery of Egyptian Artifacts</h1>
10    <div class="gallery">
11        <article class="card">
12            <header class="card-header">Scarab</header>
13            <div class="card-body">
14                <p>A symbol of rebirth and protection. Pharaohs wore it as an amulet.</p>
15            </div>
16            <footer class="card-footer">Dated: 1500 BCE</footer>
17        </article>
18        <article class="card">
19            <header class="card-header">Mask of Tutankhamun</header>
20            <div class="card-body">
21                <p>The golden funeral mask of the young pharaoh. Made of over 10 kg of pure gold, decorated with lapis lazuli and turquoise.</p>
22            </div>
23            <footer class="card-footer">Dated: 1323 BCE</footer>
24        </article>
25        <article class="card">
26            <header class="card-header">Ankh</header>
27            <div class="card-body">
28                <p>The key of life - a symbol of eternity.</p>
29            </div>
30            <footer class="card-footer">Dated: 2000 BCE</footer>
31        </article>
32    </div>
33</body>
34</html>