Subgrid

Align elements inside nested containers perfectly with each other by sharing the parent's grid tracks.

CSS7 min readConcept 24 of 43

What it is

subgrid is a special value for grid-template-columns or grid-template-rows. It allows a nested grid container to adopt the grid tracks defined by its parent, rather than creating its own independent grid.

Why it matters

Imagine a row of three product cards. Each card has an image, a title, a description, and a 'Buy' button at the bottom. If Card B has a very long title, it pushes its description and button down.

Before subgrid, it was impossible to align the 'Buy' buttons across all three cards natively, because the contents of Card A had no idea how tall the contents of Card B were.

With subgrid, all three cards can share the exact same row tracks from a master parent grid, ensuring their internal contents perfectly align with each other.

How it works

1. Create a parent grid with rows (or columns) that the children should share: .parent { display: grid; grid-template-rows: auto 1fr auto; }

2. Make the child span across those rows in the parent: .card { grid-row: span 3; }

3. Make the child a grid itself, and tell it to use the parent's tracks: .card { display: grid; grid-template-rows: subgrid; }

Try it

Toggle Subgrid on and off. Notice how the 'Buy' buttons at the bottom of the cards behave. Without Subgrid, they stick to the text above them. With Subgrid, they snap to a shared parent track and perfectly align horizontally!

Subgrid Alignment

Align nested elements

Notice the buttons on the cards below. Toggle subgrid to align them perfectly.

/* 1. The Master Grid */
.parent-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
}
 
/* 2. The Nested Cards */
.card {
display: grid;
grid-template-rows: auto 1fr auto;
}

Short Title

Brief info.

An Extremely Long Product Title That Wraps To Multiple Lines

This extra text pushes the button down if subgrid is disabled.

!Notice how the middle card's long title pushes its button down, completely ruining the horizontal alignment with the other cards.

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1What is the primary problem that `subgrid` solves?
  2. 2Which property actually activates the subgrid behavior on a nested container?
  3. 3If a card using `grid-template-rows: subgrid` contains an image, a title, and a button, what must be true about the card's placement in the parent grid?

Remember this

  • subgrid allows nested grids to participate in their parent's track sizing.
  • It's perfect for aligning card contents (like headers or footers) across a row.
  • The subgrid child must explicitly span the number of tracks it needs to utilize.
  • Use display: grid combined with grid-template-rows: subgrid.

Done with this concept?

Mark it complete to track your progress. No login needed.