A couple of weeks ago I spoke at Frontend NE in Newcastle, a big part of my talk was explaining what the CSS Grid Subgrid feature from Grid Level 2 would contain. With no implementation to work with, I had mocked up a bunch of demos using DevTools for that talk.
En route to San Francisco to Smashing Conf, where I was running a CSS Layout workshop, I was given access to a Try build of Firefox Nightly, which has an early implementation of the feature. This does mean I need to redo some slides for my talks in May so they can use real screenshots, but I’ll take that for actually getting my hands of the feature and being able to try the demos for real!
I posted a couple of screenshots on Twitter, and I will be publishing all of my examples over at Grid by Example once the feature is behind a flag in regular Nightly. However for everyone who had better things to be doing than looking at Twitter over the weekend here are a few screenshots. These include links to my CodePen examples so you can see the code for the subgrid elements. I’ve highlighted the grid and subgrid in Firefox DevTools to help you see what you are looking at.
Subgrid for columns and rows
In this case the subgrid is on columns and rows of the parent. This means that there is no implicit grid in the subgridded area, as both dimensions are tied to the available tracks on the parent grid.
CodePen example for subgrid columns and rows.
Subgrid for columns only
In this case I have used a subgrid for columns. This means I can use implicit grid tracks to add as many rows as needed for the items. The rows use their own sizing, just as a nested grid would without subgrid.
CodePen example for subgrid columns
Subgrid for rows only
In this case I have made the rows a subgrid, and defined columns as normal in fr units. As you can see the column tracks do not line up with the parent as they are using their own grid definition.
CodePen example for subgrid rows
I’m so excited to be seeing this in progress, and also to be able to teach it in my workshops and talks. For more background on subgrid, here are some links.