Exciting Things on the Horizon For CSS Layout
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! 🤘— Chrome DevTools (@ChromeDevTools) April 29, 2020
Over the last couple of months, we teamed up with @EdgeDevTools to work on this highly-requested feature. Here is a sneak preview.
We have many more ideas on how to make grids easier and more accessible in the future – stay tuned! pic.twitter.com/b3u4XaEkzv
‘gap’ for flexbox supported in Chrome Canary
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.
From Adam Argyle on Twitter:
🎉 flex that gap in the latest release of Chrome Canary 🎉— Adam Argyle (@argyleink) April 27, 2020
display: flex; 🦾
gap: 1ch; 🔥
help us test it out won't ya!?
requires web experiments enabled, visit chrome://flags/#enable-experimental-web-platform-features in Canary to enable pic.twitter.com/lG3WusFA4X
Masonry in Firefox Nightly
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.— [Mia | Miriam] Suzanne? (@MiriSuzanne) April 29, 2020
1. go to "about:config"
2. toggle "layout.css.grid-template-masonry-value.enabled"
3. try it out!https://t.co/65EW1jOMfihttps://t.co/psOFPVLRk1
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!