For the CSS Grid fans who have been following along, last night the subgrid value for grid-template-columns and grid-template-rows landed in Firefox Nightly. Download a copy of Nightly and give it a go!
To help I have created some things for you to read and play with:
- My initial write-up of the feature in Smashing Magazine.
- The documentation for the feature on MDN.
- Examples over at Grid by Example
- The recent talk I have been doing – the latest was yesterday at Codegarden – has slides and more demos.
- A post on this blog regarding one of the less obvious patterns subgrid will help us with.
Regular readers will know that this is a feature I have been very keen to ensure is made available, spec historians might enjoy earlier writing on the subject:
- A 2015 post about why I felt we needed to keep the subgrid feature
- A post from 2016 about the revised subgrid specification which would have tied subgrid to both dimensions. I am glad we dropped that idea.
- My post when the feature was moved to Level 2 in 2017.
- A year ago I explained the First Public Working Draft of Grid Level 2.
If nothing else, I have staying power when advocating for the things I believe are important! Now it is over to you.
If you are looking at subgrid and find something which looks like a browser bug in Nightly – something where the specification says one thing and the browser is doing another – you can raise that over at Bugzilla. The main bug for implementation is here. If you look at the “Depends on” section you can see other issues already raised. If you find something new, raise a new issue.
If you find something that is not in the specification but you think that it should be, or realise there is a problem building a certain pattern which seems like a subgrid use case, log that with the CSS Working Group as an issue on the spec itself.
Head over to the Chrome bugtracker and star the bug there to show your interest in implementation. Don’t add “me too” type comments, just hit the star. By doing so you’ll get updates if any comments are made on progress.
I’ll be talking about the feature next week at CSSConf EU, I’m very excited that everyone will be able to actually take a look at my demos, though I now have some slides to update. I’ll also be covering subgrid in my upcoming layout workshops, for example in a few weeks at SmashingConf Toronto.