Introduction to CSS Subgrid
Subgrid has landed in Firefox Nightly! Let’s talk about what subgrid is, why we need it and how to use it.
What is subgrid?
Nested grids. That’s it. But for real. That’s really it. When you have an element that’s display grid, and it has direct children that need to be aligned to their parents’ grid, you’r going to need some manual math wizardry. That’s why they invented subgrid. Don’t believe me? I’ll show you.
Why do I need subgrid?
— Because nesting a grid without subgrid requires you to go full Einstein, doing al all kinds of quick maths. Oh, and going full Einstein isn’t very scalable for when, oh I don’t know, your competent designer decides to change up your grid halfway through the project.
This is a 12 column grid, let’s call it our main grid. The columns are separated by a gap of 20 pixels. Our main grid contains two main grid items (green and blue). The blue sidebar on the right spans 4 grid columns, and we’re going to leave that one alone. It doesn’t like subgrid and looks unhappy.
The one on the left is where our magic happens and spans 8 columns on the main grid. Let’s start by creating this main grid (check out the Codepen here).
Here’s the final mark-up for our final product, so we can focus on the CSS. It’s a bit excessive, but we’ve gotta please those pesky semantic and accessibility people.
Now, for the CSS. We could use grid-template-areas, but for the sake of this example we’re using explicit grid columns:
And this will result in this hideous, but functional grid
Creating a subgrid without subgrid
In my amazing UI design, the green container that spans those 8 grid columns has direct children. A pretty girl with pink make-up and Princess Leia vibes, and an original and inspirational text that I thought of. But those direct children also seem to be aligned to our main grid. How would we make this work in CSS?
Well, it’s pretty crap actually. We’re going to have to make our .large-col a display: grid and calculate the nested columns ourselves, including the possible grid-gap and define new grid-template-columns by doing those manual calculations. That would mean that .large-col would look like this:
Are you kidding me?
So, the full length of the container, plus the grid gap, divided by eight, because we want to calculate the width per nested column, and that amount times five, because that’s the amount of columns of our main-grid we want our nested grid item to span. Check out the Codepen here.
Beside the fact that this is not the kind of code I would want to work in, or let my colleagues wrestle through, this isn’t very scalable. What happens when the grid-gap changes? What happens when we add padding to the container? And even more important, what do we do when we have another nested grid? Go another round of A Beautiful Mind? Good luck with that.
How to use subgrid
Instead of defining and calculating those nested columns, subgrid does it for us. The only thing we have to do, is specifying which tracks we want our subgrid to span.
The grid-column tracks that you see specified on .large-col__img and .large-col__text belong to our main-grid, because we’ve stated with grid-template-columns: subgrid on .large-col that the grid tracks on this element are the same as its direct parent. No more calculations, no more bouncing your head off the wall. Scalable as can be, no more worries. Check out the codepen here.
“Fun” subgrid facts
- You can reset the grid gap of its parent, by resetting it on the element on which you use
subgrid. - Tracknames are passed down from the parents’ grid. For all those grids nested inside fancy grids that use
grid-template-areas. - Rachel Andrew knows everything there is to know about grids. She kind of invented the whole subgrid thing. If you want to go in depth, please visit and read her articles.
That’s it! Thanks for reading and don’t forget to drop some claps or send some mocha pie.
As we say in The Netherlands,
Groetjes!
