Chris’ Corner: Subgrid

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

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

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

• Firefox shipped subgrid on Dec 2, 2019.
• Safari shipped subgrid on Sep 11, 2022.
• Chrome shipped subgrid on Sep 12, 2023.

Caniuse 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 1fr 1fr 1fr;
}
.child {
  grid-column: 2 / 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 has a Pen that’s a quicky check. The CSS 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 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 example the content in the list items is ragged-left, but in the second 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 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 showcased when he said that subgrid is “considered essential” seven years ago before subgrid shipped. Eric 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!

• I think of Rachel Andrew as the One True CSS Layout Master and she’s got a whole talk dedicated to CSS subgrid, which gets deeper into the details. One little one you might want to know: subgrids inherit the parent grid’s gap, but doesn’t have to!
• Kevin Powell did a series of videos he called “Subgrid Awareness Month” about a year ago. This one about consistent layouts is a good place to start. CSS grid itself has strong “control the layout from the parent” vibes (unlike flexbox), and subgrid really enhances those powers.