April 21, 2024





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.

The components within the columns are now aligned

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.

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

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.

The columns now have equal height content

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.

Only the div content shows up in each column

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.

Our content spans three rows, but with gaps between

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.

Our content now spans three rows of the subgrid

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:





Source link

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

π–‚π–†π–˜π–π–Žπ–“π–Œπ–™π–”π–“ π•½π–Šπ–†π–‰

error: Content is protected !!