When will CSS Grid Lanes arrive? How long until we can use it?

"Anytime an exciting new web technology starts to land in browsers, developers want to know "when in the world am I going to be able to use this?" Currently, the finalized syntax for Grid Lanes is available in Safari Technology Preview. Edge, Chrome and Firefox have all made significant progress on their implementations, so it's going to arrive sooner than you think. Plus, you can start using it as soon as you want to with progressive enhancement."

"Deliver the layout on the left using Grid Lanes to browsers with support, while providing a fallback for other browsers. (If you haven't heard of Grid Lanes yet, it's a new tool for layout that makes it easy to create masonry-style layouts in CSS alone. Read this article all about it. And this article about our developer tools that make it even easier.)"

"Firefox was first It's the team that was at Mozilla in 2019-2020 who wrote the original CSS Working Group Editor's Draft for Grid level 3, proposing concrete ideas for how masonry-style layouts would work in CSS. The feature shipped in Firefox Nightly in very early 2020. Some of the syntax has since changed, but under the hood, the way this new layout feature relies on and expands CSS Grid is basically the same, which means much of the heavy lifting for implementing it in the Gecko layout engine is underway."

"Firefox does need to update their implementation (including updating to the new syntax and adding the new flow-tolerance property, among other things) but if you want to try it out in Firefox today, you can enter about:config in the URL bar, search for "masonry" and set the flag to true - or use Firefox Nightly where it's already on by default. (At the moment, remember to use the original grid-template-*: masonry syntax to trigger this"

Grid Lanes adds masonry-style layout capabilities by extending CSS Grid and can be used now with progressive enhancement. Finalized syntax is available in Safari Technology Preview, and Edge, Chrome, and Firefox have all made significant implementation progress. Firefox implemented an early version in Nightly in 2020 based on the Grid Level 3 draft, and the core approach still relies on and expands CSS Grid. Firefox's implementation requires updates to adopt the new syntax and add the flow-tolerance property. Developers can enable the current Firefox implementation via about:config or use Firefox Nightly with the original grid-template-*: masonry syntax.

Read at WebKit