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.
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.
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.
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.
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.
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.
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: