In this quick tip, we’ll look at how to use the subgrid feature of CSS Grid to align the content of boxes that sit side by side.
Note: before delving into subgrid, it’s important to understand the basics of Grid layout. If you’re new to Grid, or you need a refresher, check out our beginner’s guide to CSS Grid.
The Problem
The image below shows three boxes in a row. They have different amounts of content, but they’re all the same height thanks to Grid layout.
However, the components within each box don’t align with each other, which doesn’t look so nice, and there’s nothing Grid can do about that. As far as Grid is concerned, there’s just one row of boxes, and it doesn’t offer a way to align the content they contain into rows. But by using subgrid, we can get the result shown below.
Let’s dive into how to use Grid and subgrid to get this result.
Step 1: Setup
Here’s the basic HTML for our demo:
<article>
<section></section>
<section></section>
<section></section>
</article>
We have and <article> wrapper containing three <section> elements. The <article> has the following CSS:
article {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
This CSS causes the <section> elements to be arranged in three columns.
Each <section> contains an <h1>, a <ul> and a <div>:
<section>
<h1></h1>
<ul></ul>
<div></div>
</section>
At this stage, each column in the grid is actually the same height, but not each column is full of content, as shown below.
There’s a different amount of content in each column, so they don’t appear to be the same height.
Step 2: Setting display: grid on the sections
We can only use the subgrid value on an element that’s set to display: grid. As we want to use subgrid to align the content of our <section> elements, we therefore need to set them to display: grid first:
section {
display: grid;
}
The content now fills each of our columns, as shown in the inspector.
Here’s our updated demo.
Note: the content is stretched to full height because the default setting for columns is align-content: stretch. (That’s not important for this demo, but worth noting anyway!)
Step 3: Using subgrid to Align Content
The final step is to get the three elements in each column to align in rows. Firstly, we set the grid-template-rows property to subgrid:
section {
display: grid;
grid-template-rows: subgrid;
}
This produces the result pictured below.
Oops! What’s gone wrong here? We can only see the last element of each column.
The problem is that our <article> element only has one row, so the elements within each section are stacked on top on one another within that one row.
The final step we need to take is to tell the subgrid content to span three rows:
section {
display: grid;
grid-template-rows: subgrid;
grid-row: span 3;
}
Our content now spans three rows of the subgrid, as shown below.
But look, there are gaps between each row! That’s because subgrid inherits the gap setting of its parent grid. We can change that by setting a different gap value. If we apply gap: 0 to our <section> elements, we get the final result we’re seeking.
Here’s our completed demo.
As a side note, an alternative to grid-row: span 3 would be grid-row: 1 / 3.
Browser Support
Since late 2023, subgrid has worked across all major browsers, as explained on the caniuse site. So it’s definitely viable to start using subgrid now.
For browsers that support Grid but not subgrid, you’ll probably get an acceptable result. Our original demo above was quite acceptable, even though it looks nicer to have the content aligned horizontally.
For browsers that don’t support Grid layout at all, users should get perfectly usable content all in a single column.
Conclusion
The subgrid value can be set for grid-template-columns and/or grid-template-rows, allowing subgrid content to align with the columns and rows of parent grids. As you can see, subgrid is quite easy to use but is a powerful and much-needed addition to Grid layouts.
To learn more about all the things you can do with subgrid, check out the following resources: