CSS Grid fans are probably already aware that I have been very keen to see subgrid implemented in CSS Grid Layout after having been removed from the Level 1 specification last year in order to allow more time for discussion. As other people have started to use Grid, they have also discovered the use cases for subgrid and at this point it is the feature I am most asked about.
The CSS Grid Level 2 specification now has a First Public Working Draft, and this level of the specification will mostly deal with the subgrid part of the specification. At the CSS Working Group meeting in Berlin we resolved that subgrids should be able to be single axis only, returning them to the original concept rather than the revised one mentioned in my 2016 post. Therefore it would be worth looking at the Editor’s Draft of Grid Level 2, rather than the FPWD linked above as it has the latest edits.
What is a subgrid?
You can nest grids when using Grid Layout, a Grid Item can become a Grid Container by setting display: grid on it. However, as seen in the CodePen below, the tracks defined on that nested grid have no relationship to the tracks on the parent. In the example I have an item spanning three column tracks of the grid, it is also a Grid Container with three column tracks – however these do not line up with the tracks of the parent. You can test this by making the window small, or adding more content to a sub-item. If you are careful with sizing you can often make a nested grid look like everything lines up, however there isn’t a relationship enforcing that.
See the Pen Nested Grid by rachelandrew (@rachelandrew) on CodePen.
If the nested grid columns were to be defined as a subgrid, we would use the subgrid value of grid-template-columns on that child element. The child would then use the three column tracks that it spanned, and its children would lay out on those tracks. As single axis subgrids are allowable we could then define row tracks or allow them to be created in an implicit grid for the subgrid.
A CodePen is below, however no browser currently has an implementation this will work in.
See the Pen Single Axis subgrid demo. by rachelandrew (@rachelandrew) on CodePen.
Why is it different to display: contents?
We do now have some browser support for display: contents, the value of the display property which enables the removal of a box from the display. As noted in my post Why display: contents isn’t CSS Grid Layout Subgrid, this method works if we simply want to remove a box and allow the children to participate in the grid (or Flex) layout. It doesn’t give us the ability to create a mini-grid set up against one axis, nor does it allow us to add a background or border to the parent grid item – as that box is gone.
I have taken the example above and added display: contents to the item we were defining as a nested grid or subgrid, to demonstrate the difference. The child items now just participate in auto-placement on the grid and we lose the background colour.
See the Pen Nested with display: contents by rachelandrew (@rachelandrew) on CodePen.
What happens next?
Mats Palmgren at Mozilla has already put significant work into a prototype implementation, and he has been posting some screenshots and also raising issues against the specification over on the CSS WG GitHub repo. Some of those are as follows, however searching for css-grid-2 is a good way to see what has been raised against this level of the spec.
- subgrid and grid-gap #2285
- resolving line names in subgrids #2564
- support automatic grid span for subgrids #2565
- subgrid border/padding/margin #2592
- Add new value ‘meet’ to align-content/justify-content #2610
Specifications tend to be developed in parallel with at least one implementation, it is more of an iterative process than you might assume. Browser engineers try to implement, come back with questions about the spec, the spec is updated and implementation work carried out. So, if you are hoping for subgrid, all this activity should be good news.
If you are interested in the progress of subgrid then follow along, it will be useful to the spec editors and browser implementors alike if people who build websites add their thoughts to any questions.
If you are struggling to understand the conversations my advice is to build examples – even if they don’t work. My journey with Grid Layout (and the site Grid by Example) essentially started because I wanted to understand the emerging spec and the only way I know to understand a spec is to write code. Even when no browser supports it I write code, and try to think about how it would work. Building an example helps you to think, “what would I expect to happen here?” That will help you, but also knowing what people expect to happen is very useful when writing specifications, and figuring out what initial behaviour should be. So if you have questions or think something that is being proposed is unintuitive, your examples can help you participate in the discussion.