WebKit's `display: grid-lanes;` Brings Native Masonry Layouts to CSS
Originally published on Frontend Masters Blog
Summary & Key Takeaways
WebKit has introduced display: grid-lanes; for advanced grid layouts. This new CSS feature enables native Masonry layouts. It supports arbitrary column widths within the Masonry grid. Crucially, it maintains proper tabbing order for accessibility. The layout is achievable using only HTML and CSS, without JavaScript. This represents a significant progressive enhancement for web design.
Our Commentary
Finally! Masonry layout without JavaScript hacks or complex grid-template-rows trickery. This is a huge win for the web platform and accessibility. We've been waiting for a native solution for ages. It's these kinds of foundational CSS additions that genuinely move the needle for front-end development. I'm already thinking about where we can use this.