December 19, 2025
Traffic jam of hot takes
CSS Grid Lanes
Masonry goes native; devs hype, browser drama explodes
TLDR: Apple’s test Safari adds CSS Grid Lanes, a built-in way to do Pinterest-like layouts without heavy scripts. Devs cheer the native fix, while skeptics worry about complexity, older machines, and new-browser hurdles—sparking a debate over access, standards, and how fast the web should move.
Move over hacky scripts—CSS Grid Lanes just rolled in, promising Pinterest-style “masonry” layouts built right into the browser. Apple’s WebKit shipped it in the Safari Technology Preview 234, after Mozilla groundwork and years of debates. Think photo cards sliding into the shortest column—no more fiddly JavaScript. The vibe? A split-screen of joy and side-eye.
On one side, devs are thrilled. jonah says Masonry worked but was “pretty hacky,” needing pixel math and constant resizing—so a native fix sounds dreamy. memonkey even used masonry as an interview test and now wants to peek under the hood like it’s a pit stop on the CSS Autobahn. On the other side, valleyer wonders if this added complexity is worth breaking older browsers, sharing battle stories from an 11‑year‑old machine. Then phoronixrly drops a spicy one-liner about this being “another barrier” for new browsers.
There’s confusion and comedy too: ThatMedicIsASpy asks if “grid-template-rows: masonry” is headed to the museum, while threads riff on the “cars changing lanes” metaphor. The sales pitch is clear: fewer media queries (rules that adapt to screen size), smoother infinite scrolling, and keyboard navigation that doesn’t trap you in one column. The mood: excited builders vs. compatibility crusaders, with a dash of new-browser anxiety.
Key Points
- •CSS Grid Lanes provides a native CSS approach to masonry-style layouts using CSS Grid.
- •Developers can test Grid Lanes in Safari Technology Preview 234.
- •Basic usage: `display: grid-lanes`, `grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))`, and `gap` for spacing.
- •Grid Lanes supports varying column sizes, item spanning, and explicit placement via CSS Grid properties.
- •Benefits include responsive layouts, logical keyboard tab order across visible content, and infinite content loading without JS for layout.