On this fast tip, we’ll take a look at the right way to use the subgrid characteristic of CSS Grid to align the content material of packing containers that sit aspect by aspect.
Notice: earlier than delving into subgrid, it’s essential to know the fundamentals of Grid structure. In the event you’re new to Grid, otherwise you want a refresher, take a look at our newbie’s information to CSS Grid.
The Downside
The picture beneath reveals three packing containers in a row. They’ve totally different quantities of content material, however they’re all the identical top due to Grid structure.
Nonetheless, 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 packing containers, and it doesn’t supply a method to align the content material they comprise into rows. However by utilizing subgrid, we will get the end result proven beneath.
Let’s dive into the right way to use Grid and subgrid to get this end result.
Step 1: Setup
Right here’s the essential HTML for our demo:
<article>
<part></part>
<part></part>
<part></part>
</article>
We have now and <article> wrapper containing three <part> parts. The <article> has the next CSS:
article {
show: grid;
grid-template-columns: 1fr 1fr 1fr;
}
This CSS causes the <part> parts 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 top, however not every column is stuffed with content material, as proven beneath.
There’s a special quantity of content material in every column, so that they don’t seem like the identical top.
Step 2: Setting show: grid on the sections
We will 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> parts, we due to this fact have to set them to show: grid first:
part {
show: grid;
}
The content material now fills every of our columns, as proven within the inspector.
Right here’s our up to date demo.
Notice: the content material is stretched to full top as a result of the default setting for columns is align-content: stretch. (That’s not essential for this demo, however value noting anyway!)
Step 3: Utilizing subgrid to Align Content material
The ultimate step is to get the three parts 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 end result pictured beneath.
Oops! What’s gone unsuitable right here? We will solely see the final factor of every column.
The issue is that our <article> factor solely has one row, so the weather inside every part are stacked on high 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.
However look, there are gaps between every row! That’s as a result of subgrid inherits the hole setting of its dad or mum grid. We will change that by setting a special hole worth. If we apply hole: 0 to our <part> parts, we get the ultimate end result we’re looking for.
Right here’s our accomplished demo.
As a aspect be aware, an alternative choice to grid-row: span 3 can be grid-row: 1 / 3.
Browser Assist
Since late 2023, subgrid has labored throughout all main browsers, as defined on the caniuse web site. So it’s positively viable to start out utilizing subgrid now.
For browsers that assist Grid however not subgrid, you’ll most likely get an appropriate end result. Our authentic demo above was fairly acceptable, though it appears to be like nicer to have the content material aligned horizontally.
For browsers that don’t assist Grid structure in any respect, customers ought to get completely usable content material all in a single column.
Conclusion
The subgrid worth may be set for grid-template-columns and/or grid-template-rows, permitting subgrid content material to align with the columns and rows of dad or mum grids. As you possibly can see, subgrid is kind of simple to make use of however is a robust and much-needed addition to Grid layouts.
To be taught extra about all of the issues you are able to do with subgrid, take a look at the next sources:
