Grid Level 2 and Subgrid

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.

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.

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.