A design pattern solved by subgrid
I’ve been playing with this early implementation of the subgrid feature in Firefox, and it occured to me that subgrid could solve a less obvious use case.
In Grid Layout you can target the end line of the explicit grid with
-1. The explicit grid being the grid you create with
grid-template-columns. However if you are using an implicit grid, for example to create as many rows as you need to load in your content, you can’t target the end of that grid with
-1. This means you can’t easily span something to the end of your grid.
It turns out that subgrid will let you do this. In this CodePen I am creating a four column, three row grid. The
ul element is placed in row two, spanning three columns. The aside is placed in row 1, spanning to row
I make the
ul a subgrid, so the items can lay themselves out in the columns defined on the parent. As we only have a subgrid for columns the
ul has an implicit grid for rows, so as many rows as we need are created. These all go into that one auto sized row of the parent, which stretches to accomodate them. Here is an image of what that looks like. The subgridded bit being the list items A to K. You can see these line up with the direct child elements in the header as they are using the same column tracks.
I’m very glad we held out for one-dimensional subgrids, as I think there are probably more non-obvious patterns we can use this feature for.