This content originally appeared on this is rachelandrew.co.uk and was authored by this is rachelandrew.co.uk
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-rows and 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 -1.
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.
This content originally appeared on this is rachelandrew.co.uk and was authored by this is rachelandrew.co.uk
this is rachelandrew.co.uk | Sciencx (2019-05-07T22:03:00+00:00) A design pattern solved by subgrid. Retrieved from https://www.scien.cx/2019/05/07/a-design-pattern-solved-by-subgrid/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.