This past week has brought a few announcements from browser vendors of some exciting things that might have a big impact on CSS layout in the very near future.
Chrome previews a new Grid inspector
I’ve long been a fan of Firefox’s Grid inspector. Other browsers just don’t come close when it comes to debugging CSS layout - until now.
This week Chrome teased us with a sneak-preview of a brand new Grid inspector, which might even rival Firefox’s. No more squinting and counting line numbers – Chrome’s inspector shows them to you! Although I’m a Firefox girl at heart, I’ll still be giving it a whirl – and it’ll certainly make debugging in Chrome easier.
It's almost here: CSS grid tooling! 🤘
Over the last couple of months, we teamed up with @EdgeDevTools to work on this highly-requested feature. Here is a sneak preview.
Again, Chrome is playing catch-up to Firefox on this one. The gap property has been supported in Grid layout for a while (previously grid-gap), but now it can be used in flexbox too. This makes building algorithmic layouts a lot easier - no more hacking around with margins.
This is currently behind a flag in Chrome Canary – you’ll need to enable it.
To be able to do this in CSS has always felt like a distant dream. But Miriam Suzanne just announced that masonry grids are being tested in Firefox Nightly!
"Masonry" Grids are being tested in Firefox Nightly, behind a feature flag. 1. go to "about:config"2. toggle "layout.css.grid-template-masonry-value.enabled"
It’s still likely to be a long road to widespread browser support – we’re still waiting on other browsers to follow Firefox’s lead and work on subgrid support, six months down the line. But I really think this has the potential to be a game -changer – almost as much as subgrid. In fact, I would say that I need to build masonry layouts more often than I build layouts that would require subgrid, given that I can usually work around the lack of subgrid support with nested grids and a bit of maths (although it’s far from ideal).
It’s great to see the kind of progress being made on CSS layout. Let’s hope these features become mainstream soon!