Exciting Things on the Horizon For CSS Layout

default-2

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!


This post was originally posted here

Check out our Starter Sites built with #ToolWeLove including Toolset, Elementor Pro, and Astra Pro.

 

Share this page
Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on email
Pixallus Website Giveaway

We understand COVID has created shifts in many people’s lives. That’s why we’ve decided to giveaway a fully functional website with all the tools you

Read More »
How to Choose WordPress Hosting

Pixallus WordPress Hosting. Simplified. Enjoy blazing fast WordPress website loading speeds and 99.9% uptime. Whether you’re a freelancer, small business, or a large organization, we

Read More »
sendinblue