On this fast tip, we’ll take a look at methods to use the subgrid function of CSS Grid to align the content material of containers that sit facet by facet.

Notice: earlier than delving into subgrid, it’s necessary to grasp the fundamentals of Grid format. When you’re new to Grid, otherwise you want a refresher, take a look at our beginner’s guide to CSS Grid.

The Downside

The picture beneath reveals three containers in a row. They’ve completely different quantities of content material, however they’re all the identical peak because of Grid format.

Nevertheless, the parts inside every field don’t align with one another, which doesn’t look so good, and there’s nothing Grid can do about that. So far as Grid is worried, there’s only one row of containers, and it doesn’t provide a strategy to align the content material they include into rows. However by utilizing subgrid, we will get the consequence proven beneath.

The components within the columns are now aligned

Let’s dive into methods to use Grid and subgrid to get this consequence.

Step 1: Setup

Right here’s the fundamental HTML for our demo:

<article>
  <part></part>
  <part></part>
  <part></part>
</article>

We’ve got and <article> wrapper containing three <part> components. The <article> has the next CSS:

article {
  show: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

This CSS causes the <part> components to be organized in three columns.

Every <part> comprises an <h1>, a <ul> and a <div>:

<part>
  <h1></h1>
  <ul></ul>
  <div></div>
</part>

At this stage, every column within the grid is definitely the identical peak, however not every column is stuffed with content material, as proven beneath.

The grid columns are the same height, but the content doesn't stretch the full height of some columns

There’s a unique quantity of content material in every column, in order that they don’t look like the identical peak.

Step 2: Setting show: grid on the sections

We are able to solely use the subgrid worth on a component that’s set to show: grid. As we need to use subgrid to align the content material of our <part> components, we subsequently must set them to show: grid first:

part {
  show: grid;
}

The content material now fills every of our columns, as proven within the inspector.

The columns now have equal height content

Right here’s our up to date demo.

Notice: the content material is stretched to full peak as a result of the default setting for columns is align-content: stretch. (That’s not necessary for this demo, however price noting anyway!)

Step 3: Utilizing subgrid to Align Content material

The ultimate step is to get the three components in every column to align in rows. Firstly, we set the grid-template-rows property to subgrid:

part {
  show: grid;
  grid-template-rows: subgrid;
}

This produces the consequence pictured beneath.

Only the div content shows up in each column

Oops! What’s gone mistaken right here? We are able to solely see the final ingredient of every column.

The issue is that our <article> ingredient solely has one row, so the weather inside every part are stacked on prime on each other inside that one row.

The ultimate step we have to take is to inform the subgrid content material to span three rows:

part {
  show: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}

Our content material now spans three rows of the subgrid, as proven beneath.

Our content spans three rows, but with gaps between

However look, there are gaps between every row! That’s as a result of subgrid inherits the hole setting of its guardian grid. We are able to change that by setting a unique hole worth. If we apply hole: 0 to our <part> components, we get the ultimate consequence we’re in search of.

Our content now spans three rows of the subgrid

Right here’s our accomplished demo.

As a facet notice, a substitute for grid-row: span 3 can be grid-row: 1 / 3.

Browser Help

Since late 2023, subgrid has labored throughout all main browsers, as defined on the caniuse site. So it’s positively viable to begin utilizing subgrid now.

For browsers that help Grid however not subgrid, you’ll in all probability get a suitable consequence. Our unique demo above was fairly acceptable, though it seems nicer to have the content material aligned horizontally.

For browsers that don’t help Grid format in any respect, customers ought to get completely usable content material all in a single column.

Conclusion

The subgrid worth will be set for grid-template-columns and/or grid-template-rows, permitting subgrid content material to align with the columns and rows of guardian grids. As you possibly can see, subgrid is sort of straightforward to make use of however is a strong and much-needed addition to Grid layouts.

To study extra about all of the issues you are able to do with subgrid, take a look at the next assets: