CSS Grid Lanes (Masonry Layout) Is Here: A Complete Guide for 2026

Originally published on NextFuture

Pinterest-style masonry layouts used to require JavaScript hacks, heavyweight libraries, or Flexbox column tricks that broke reflow. Not anymore. In 2026, CSS Grid Lanes (formerly known as the masonry proposal) is the native browser answer — and Safari 26 just shipped it first.

If you've ever built a card grid where items have variable heights and wanted them to pack tightly without gaps, this is the feature you've been waiting for. Let's dig in.

What Are CSS Grid Lanes?

CSS Grid Lanes adds a new display mode that creates a masonry-style layout using the familiar grid syntax. Items flow into the axis with the most available space, resulting in a tightly packed layout without the ugly gaps you get with regular grid rows.

The specification settled on the grid-lanes keyword rather than the earlier masonry proposal after years of debate between browser vendors. Here's the minimal syntax:

.masonry-grid {  display: grid;  grid-template-columns: repeat(3, 1fr);  grid-template-rows: masonry; /* triggers masonry packing on the row axis */  gap: 1rem; }

.masonry-grid {  display: grid;  grid-template-columns: repeat(3, 1fr);  grid-template-rows: masonry; /* triggers masonry packing on the row axis */  gap: 1rem; }

Enter fullscreen mode

Exit fullscreen mode

That's it. No JavaScript. No ResizeObserver. No position calculations. The browser handles all the packing logic natively.

Progressive Enhancement: Support Both Old and New

Since Grid Lanes is only in Safari 26 right now (Chrome and Firefox support is coming), you'll want a progressive enhancement fallback. Use @supports:

/* Fallback: regular grid for unsupported browsers */ .card-grid {  display: grid;  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));  gap: 1rem;  align-items: start; /* prevents cards from stretching to row height */ }

/* Fallback: regular grid for unsupported browsers */ .card-grid {  display: grid;  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));  gap: 1rem;  align-items: start; /* prevents cards from stretching to row height */ }

/* Enhancement: masonry for supported browsers */ @supports (grid-template-rows: masonry) { .card-grid { grid-template-rows: masonry; } }

/* Future syntax using grid-lanes keyword */ @supports (display: grid-lanes) { .card-grid { display: grid-lanes; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; } }`

Enter fullscreen mode

Exit fullscreen mode

React + Tailwind: Building a Masonry Image Gallery

Here's a practical React component that uses CSS Grid Lanes with a Tailwind-compatible class and graceful fallback:

// components/MasonryGrid.tsx interface MasonryGridProps {  children: React.ReactNode;  columns?: 2 | 3 | 4;  gap?: string; }

// components/MasonryGrid.tsx interface MasonryGridProps {  children: React.ReactNode;  columns?: 2 | 3 | 4;  gap?: string; }

export function MasonryGrid({ children, columns = 3, gap = "1rem" }: MasonryGridProps) { return (

{children}

); }

// Usage export default function PhotoGallery({ photos }: { photos: Photo[] }) { return (

{photos.map((photo) => (

{photo.caption}

))}

); }`

Enter fullscreen mode

Exit fullscreen mode

The Old Way vs. The New Way

Before Grid Lanes, the most common technique was the CSS column hack:

/* The old column hack — has serious ordering problems */ .masonry-old {  columns: 3;  column-gap: 1rem; }

/* The old column hack — has serious ordering problems */ .masonry-old {  columns: 3;  column-gap: 1rem; }

.masonry-old > * { break-inside: avoid; margin-bottom: 1rem; } /* Problem: items flow top-to-bottom per column, not left-to-right / / Screen readers and keyboard nav get confused /`

Enter fullscreen mode

Exit fullscreen mode

The column hack has two fatal flaws: items are ordered vertically (top of column 1, top of column 2…) rather than naturally, and it breaks accessibility because the DOM order doesn't match visual order. CSS Grid Lanes preserves DOM order, which is a massive win for accessibility and keyboard navigation.

When to Use Grid Lanes

• Photo galleries with variable image heights

• Card grids with different content lengths (blog posts, products, testimonials)

• Dashboard widgets that have different content densities

• Pinterest/Dribbble-style layouts

When NOT to Use Grid Lanes

• When you need precise row alignment across columns (use regular grid)

• When items should maintain consistent row heights (use grid with align-items: stretch)

• When you need complex spanning behavior

Browser Support Timeline

As of early 2026, CSS Grid Lanes is available in Safari 26 (first to ship). Chrome and Firefox have the feature behind experimental flags and are expected to ship stable support later in 2026. The @supports progressive enhancement approach means you can write the code today and your layout will just get better for users as browser support expands.

Actionable Takeaways

• Start writing grid-template-rows: masonry in your grid styles today — Safari users see the improvement immediately

• Always pair with @supports and a fallback — regular grid with align-items: start looks decent on non-supporting browsers

• Ditch the CSS column hack for new projects — it has accessibility problems that Grid Lanes solves natively

• Keep an eye on the MDN CSS Grid docs — browser compatibility data for Grid Lanes is already being tracked there

This article was originally published on NextFuture. Follow us for more frontend & AI engineering content.