Exciting Things on the Horizon For CSS Layout

a stylized grid illustration

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.

From Twitter:

‘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:

Masonry in Firefox Nightly

This is a big one, and kind of blindsided me. Masonry layouts are something which, as a developer, I’m asked to implement all the time, but which are (currently) only possible using Javascript. There are some ways you can kind of do a similar thing with pure CSS (here’s one), but all of them have their limitations, such as requiring a fixed height on the parent container, or knowing the height of your grid items in advance.

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!

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!