Grid Lanes: The Masonry Layout Saga Is Coming to an End
WebKit reimagines masonry as Grid Lanes, with stable syntax, a Safari Technology Preview implementation, and fallback strategies.
Oh, the years the web community has spent discussing masonry layout. People argued about behavior, syntax, compatibility, and couldn’t even properly agree on a name. It dragged on for years, constantly getting stuck on contentious details.
Last December, the WebKit team decided to give the idea a fresh start and renamed masonry-layout to Grid Lanes. The key idea is a mental model of “traffic lanes”: elements don’t “jump around” arbitrarily but are distributed across independent vertical or horizontal lanes. This unexpectedly resolved most of the conceptual questions, both about behavior and about the API.
The result:
- The syntax has stabilized.
- The first implementation is already available in Safari Technology Preview.
- Chrome and Firefox are expected to catch up fairly quickly.
For now, Grid Lanes can be used as a progressive enhancement through @supports, with JavaScript polyfills and carefully designed fallbacks. The second article goes into detail on real-world demos and graceful degradation strategies.