|<<>>|1 of 227 Show listMobile Mode

CSS sub-grids (and grids) with Kevin Powell

Published by marco on

I’ve been using CSS Grids for a while now. I’ve found many instances where I had used flexbox, where grids turn out to be much more appropriate. That is, the grid layout algorithm lets me specify what I want without fiddling about with flex-base and flex-grow, etc. Flexbox definitely has its place, but I think we all ended up abusing it a bit in our rush to leave tables-for-layout behind.

But that’s all in the past because now we have CSS grids available everywhere and all is well with the world! That being said, if you’ve not used CSS grids yet, then you should check out this CSS-grid super-fan’s many videos. He has a playlist of CSS Grid videos by Kevin Powell (YouTube) that you can work your way through.

He even made a short video (5min) describing how to use the grid inspector in browsers. The grid inspector is super-handy, but not so intuitive to find.

Make CSS Grid soooo much easier to understand and use by Kevin Powell (YouTube)

Sub-grids

I’m more interested in what the same guy has to say about sub-grids. which are currently only available in Firefox (but it’s been available there for over 2 years now).

The 8-minute video below shows a concrete, real-world example, where you can see how little effort is required to get the browser to just align everything for you, all without fixed minimum or maximum widths (just like it used to be with tables). It should be immediately obvious why this feature is both a good thing and necessary (because the behavior can’t be replicated with existing CSS layout features).

Easy and more consistent layouts using subgrid by Kevin Powell (YouTube)

The 11-minute video below shows how the generalized mechanism lets you do the same thing for rows:

You can't do this without subgrid by Kevin Powell (YouTube)

You can find the full list of sub-grid videos (so far) in the Subgrid playlist by Kevin Powell (YouTube).

CSS sub-grids are an elegant way of aligning items without hard-coding anything (as required by existing techniques). They will continue to do what you expect regardless of the content added—i.e. there are no fixed minimum or maximum heights to make the alignment work, so you won’t be surprised when one of these artificial restrictions limits the algorithm unnecessarily (as it would with flexbox or regular grids).

You can enable Subgrid (MDN) by including grid-template-columns: subgrid. My advice to the feature designers would be to rename the value to grid-template-columns: inherit because that would be closer to the mark. Several times in the video, Kevin has to correct himself that he’s talking about the same grid rather than a copy of the grid. That’s what the nested container is doing: it’s inheriting the grid from a parent. Since it also has to declare itself as a display: grid, it can choose to inherit or explicitly set a template for its rows and/or columns. I think that would be relatively intuitive, but what do I know?

This feature kind of feels like a generalized way of getting back one of the advantages of the table-layout algorithm. The table-layout algorithm makes the cells in columns the same width throughout the table. This, despite the fact that the cells are all defined in different parents—and columns aren’t even defined as elements at all. I think we all understand why it’s not a good idea to abuse the table semantics just to be able to use the table layout algorithm. It’s nice to see that the advantages of that layout are being rescued—and generalized to be even more powerful.