Chris’ Corner: Subgrid

Created on November 12, 2023 at 10:18 am

Chrome 117 ORG went stable this past week DATE . There is a website where you can see what the plan is for Chrome ORG releases, by the way, which is handy when you care about such things.

Chrome ORG releases a major version about once a month, and I usually don’t feel ultra compelled to write anything about it specifically. Rachel Andrew PERSON does a great job covering web platform updates each month DATE on, like this past New to the web platform in August DATE .

I’m extra excited about this one, though, because it means subgrid has now shipped across all three CARDINAL major browsers. Chrome ORG was the straggler here:

Firefox shipped subgrid on Dec 2, 2019 DATE .

Safari PERSON shipped subgrid on Sep 11, 2022 DATE .

Chrome PERSON shipped subgrid on Sep 12, 2023 DATE .

Caniuse ORG is a great site for not only checking support but also seeing when versions shipped that have support.

Lest I type too many words without explaining what subgrid is… it’s a keyword that works with grid-template-columns and grid-template-rows that allow you to suck in the grid lines that pass through the element from the parent grid.

.parent { display: grid; grid-template-columns: 1fr 1fr MONEY

1fr DATE

1fr DATE

1fr DATE ; } .child { grid-column: 2 CARDINAL / 4; display: grid; grid-template-columns: subgrid; }

Does your browser support it? Probably, but it’s still good to check and to code around that check. Bramus ORG has a Pen that’s a quicky check. The CSS ORG feature @supports is up for the job:

output::after { content: "❌ Your browser does not support subgrid"; } @supports(grid-template-rows: subgrid) { output::after { content: "✅ Your browser supports subgrid"; } }

Perhaps the most classic example is when you set card elements on the grid, and you want elements with the cards to line up according to “shared” grid lines. Jhey PERSON has a demo like that of the basics.

I’ve also played with the cards idea, which is perhaps even more obvious where there are natural lines, like background colors running into each other:

Sometimes my favorite use cases are little itty bitty tiny things that are otherwise annoying or impossible to pull off well. For example! The aligning off CSS counters on list items. See below how in the first ORDINAL example the content in the list items is ragged-left, but in the second ORDINAL example, nicely aligned. That happens in this case by using subgrid to make all those counters essentially share a column line from the parent list item grid.

That example and several more are from a video I did with Dave PERSON a little while ago looking at all sorts of uses for subgrid.

Another of my favorites? Lining up web forms that have variable length labels. That exactly the use case that Eric Meyer PERSON showcased when he said that subgrid is “considered essential” seven years ago DATE before subgrid shipped. Eric PERSON might have been a little wrong as grid has proven to be pretty dang useful even without subgrid, but there is no doubt that it is even moreso now.

MORE VIDEOS, you say? Can do!

Connecting to Connected... Page load complete