Grid Lanes: Native Masonry Layouts with CSS Grid

Read Articleadded Dec 20, 2025
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 overall sentiment regarding CSS Grid Lanes and the broader state of web development is mixed but leans positive regarding the feature itself. While there is enthusiasm for a native, performant CSS masonry solution and recognition of Safari's recent progress in standards, significant concerns are raised about the fast pace of web evolution, cross-browser compatibility for older systems, and the inherent UX challenges of masonry layouts.

In Agreement

  • Safari's recent strong performance in web standards and interoperability (e.g., interop-2025, WebGPU, field-sizing) is highly commendable, signaling a positive shift in its development.
  • Native CSS solutions for masonry layouts are superior to JavaScript-based hacks (which involve absolute positioning, aspect ratio guessing, and recalculations), offering better performance, accessibility (logical tabbing), and easier implementation.
  • Moving complex layout logic from JavaScript to native CSS reduces dependencies, optimizes rendering, and is a positive development for web development, improving overall website quality.
  • The web platform needs to evolve to address long-standing gaps and meet user needs, and new CSS features like Grid Lanes contribute to this necessary progress.
  • The `@supports` CSS rule provides a mechanism for developers to implement new features with graceful degradation for older browsers, enabling progressive enhancement without breaking functionality.
  • The chosen name "Grid Lanes" is considered more appropriate and descriptive than the previous "masonry" by some users, reflecting clearer semantics.

Opposed

  • The rapid pace of web platform development, often driven by large corporations, can be challenging for open-source projects to keep up with and may lead to a de facto "embrace and extend" dynamic, fostering a desire for more web API stability.
  • Browser compatibility issues for users on older machines and operating systems are a significant concern, as new CSS features can render websites unusable or broken for them, and developers often fail to implement proper fallbacks.
  • The user experience (UX) of masonry layouts is often poor for systematic content consumption, making it difficult to read, navigate sequentially, or get a clear overview, despite its aesthetic appeal.
  • The standardization process for masonry layouts has been protracted and inconsistent across browsers, leading to confusion and delays in general availability.
  • Safari's traditional, slower release schedule for stable features is criticized for delaying customer access to improvements compared to evergreen browsers.
  • Questions remain about how effectively CSS Grid Lanes will support complex interactive behaviors like animations and drag-and-drop, or efficient detection for infinite scrolling without additional JavaScript.
  • The utility of focusing on "sugar syntax" like masonry layouts is questioned by some who believe browser developers should address more fundamental "hypermedia domains" or core CSS problems.