Grid Lanes: Native Masonry Layouts with CSS Grid

CSS Grid Lanes provides a native, standards-based masonry layout using display: grid-lanes with grid-template-* to define flexible lanes and gaps. It supports both column (waterfall) and row (brick) orientations, full Grid features (spanning, placement), and introduces item-tolerance to control packing sensitivity. It’s available now in Safari Technology Preview 234, with only minor spec decisions remaining.

Key Points

• CSS Grid Lanes brings native masonry-style layouts via display: grid-lanes, using grid-template-* to define flexible lanes and gaps—no JavaScript or media queries required.
• Orientation is automatic: columns defined produce a waterfall layout; rows defined produce a brick layout, inferred by grid-auto-flow: normal (explicit control is still under discussion).
• Grid Lanes retains full CSS Grid power: variable lane sizes, item spanning, and explicit placement all work as usual.
• item-tolerance (default 1em) tunes how strictly the packing algorithm reacts to size differences, balancing layout stability with accessible, predictable focus order; the property name may still change.
• Available now in Safari Technology Preview 234 with multiple demos; the feature is mature enough to learn and test while a few naming/controls are finalized by the CSS Working Group.

Sentiment

The community reaction is broadly positive toward CSS Grid Lanes as a feature, with genuine developer excitement about eliminating JavaScript-based masonry workarounds. However, the discussion quickly branches into well-worn HN debates — Safari's release cadence, Safari versus IE comparisons, and the quality of masonry as a layout pattern — which dilutes the overall enthusiasm. Hacker News largely agrees the feature is good but has measured expectations about cross-browser availability and some skepticism about the UX value of masonry layouts.

In Agreement

• Safari and WebKit have significantly improved and deserve credit for shipping CSS Grid Lanes and reaching the top of the Interop 2025 leaderboard
• Native CSS masonry layouts without JavaScript are a long-overdue feature that developers have been waiting for years
• The name 'grid-lanes' is more technically precise and descriptive than 'masonry', which is a metaphor that doesn't translate well for non-English speakers
• The feature opens up powerful responsive layout patterns beyond traditional masonry, such as reordering sidebar content on mobile without JavaScript
• Backward compatibility between the old grid-template-rows masonry syntax and the new display: grid-lanes approach should be achievable

Opposed

• Safari's release cadence is still slow compared to Chrome and Firefox, meaning users don't benefit from new features as quickly as they should
• Masonry and lane layouts have poor UX for systematically scanning content, as the variable-height columns make it hard to track your reading position without losing your place
• The web standards process moved too slowly on this feature due to naming debates and bikeshedding, delaying adoption by years
• Cross-browser adoption is still incomplete, limiting practical use in production despite the WebKit announcement
• The feature is still not finalized, with property names like item-tolerance likely to change before the spec is settled