Native CSS Masonry Layout with CSS Grid

Create Pinterest-style layouts without JavaScript using the new grid-lanes feature. Everything you need to know about native CSS masonry.

What is Masonry Layout?

Masonry layout—sometimes called "waterfall layout"—is a design pattern where items of varying heights are arranged to minimize gaps. Unlike a traditional grid where items align in rigid rows, masonry layouts allow items to "flow up" into available space, creating a tightly-packed, organic appearance.

For years, achieving this layout required JavaScript libraries or complex CSS hacks. Now, with CSS Grid Level 3, native masonry layout is finally here through the display: grid-lanes feature.

The CSS Working Group resolved in January 2025 to use display: grid-lanes as the official syntax, replacing the earlier display: masonry proposal. This name change better reflects the underlying mechanism: items flow into "lanes" (columns or rows) similar to traffic flowing in highway lanes.

Before native CSS support, creating masonry layouts required JavaScript libraries that measured content and repositioned items, CSS Multi-column layout with ordering issues, flexbox with limited control, or labor-intensive CSS Grid with manual positioning. The new standard eliminates these workarounds entirely.

Learn more about modern web development techniques that leverage native browser capabilities for better performance and user experience.

W3C CSS Grid Layout Module Level 3

Key Features of CSS Grid Lanes

The new standard brings powerful capabilities to web layouts

Native Browser Support

No JavaScript libraries required—CSS handles all layout calculations natively in the browser.

Automatic Item Placement

Items automatically flow into the track with the most available space, creating tightly-packed layouts.

Flexible Track Sizing

Use all standard CSS Grid sizing functions including minmax(), auto-fill, and fr units.

Spanning Support

Items can span multiple tracks while still benefiting from masonry placement algorithm.

Tolerance Control

Fine-tune placement behavior with flow-tolerance to balance packing density and reading order.

Dual Orientation

Create column-based or row-based masonry layouts depending on your design needs.

Basic Syntax

The foundation of a masonry layout uses two key CSS properties:

.container {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-template-rows: masonry;
  gap: 16px;
}

This three-line declaration creates a responsive masonry layout that:

  • Uses display: grid-lanes to establish the masonry container
  • Creates flexible columns using repeat(auto-fill, minmax(250px, 1fr))
  • Enables masonry placement along the row axis with grid-template-rows: masonry
  • Adds consistent spacing with gap

The auto-fill keyword combined with minmax() creates a fully responsive layout. As the viewport changes, the number of columns automatically adjusts, and items reflow to fill the available space without any media queries.

WebKit Blog - Introducing CSS Grid Lanes

Ready to Modernize Your Web Layouts?

Our web development team can help you implement cutting-edge CSS techniques like grid-lanes to create stunning, performant layouts for your website.

Sources

  1. WebKit Blog: Introducing CSS Grid Lanes - Official WebKit team announcement providing comprehensive technical details and examples
  2. W3C CSS Grid Layout Module Level 3 - The official W3C specification defining the grid-lanes layout model
  3. MDN Web Docs: Masonry Layout - Comprehensive developer documentation with examples and browser compatibility information