CSS Grid Lanes: Browser Support, Features, Limitations

What is CSS Grid Lanes?

CSS Grid Lanes is a CSS Working Group display mode that activates a masonry-style layout. The display: grid-lanes value reuses grid-template-columns and grid-template-rows so items pack into the lane that keeps content closest to the top. The CSS Working Group ships the spec inside CSS Grid Layout Level 3.

Which browsers does CSS Grid Lanes support?

CSS Grid Lanes is on by default only in Safari 26.4 and iOS Safari 26.4. Every other engine either runs it behind a flag or skips it.

What are the key features of CSS Grid Lanes?

CSS Grid Lanes adds a single new display value plus one new property and reuses every other CSS Grid feature. The five points below cover what changes when you switch a container from display: grid to display: grid-lanes.

• display: grid-lanes value: Activates the layout mode on a container. Every grid placement property still works on the children.
• grid-template-columns for waterfall layouts: Defines vertical lanes. Items flow downward into the shortest lane, like a Pinterest board.
• grid-template-rows for brick layouts: Defines horizontal lanes. Items flow rightward into the lane with the most free space.
• flow-tolerance property: Controls how far an item can shift from source order to keep the lanes balanced. The default is 1em.
• Explicit placement and item span: grid-column, grid-row, and grid-area still apply, so a hero card can span two lanes inside a grid-lanes container.

What are the use cases of CSS Grid Lanes?

CSS Grid Lanes targets layouts that mix items of different heights or widths inside a single container. The five use cases below pull from the WebKit and CSS Working Group examples and from production patterns that previously relied on a JavaScript masonry library.

• Photo galleries with mixed aspect ratios: Tall portraits and wide landscapes fit into the same grid without cropping or letterboxing.
• Pinterest-style boards: Cards of different content heights flow into the shortest lane, the layout pattern Pinterest, Unsplash, and Dribbble all use.
• Newspaper and magazine layouts: A hero article spans two lanes while shorter pieces fill the rest, a pattern news sites previously hand-coded with floats.
• Mega menu footers with variable groups: Site footers that hold link columns of different heights stay tightly packed without empty space at the bottom of short columns.
• Museum and portfolio gallery walls: Curated grids of artworks, products, or case studies that vary in dimension stay aligned without manual sizing tweaks.

How do you enable CSS Grid Lanes with progressive enhancement?

CSS Grid Lanes ships unflagged only in Safari 26.4 and iOS Safari 26.4, so production code has to wrap the new value in an @supports query and fall back to display: grid for every other browser.

• Set a display: grid baseline: Define grid-template-columns, gap, and any placement rules on the container. Every browser that supports CSS Grid renders this layout, which is the safe fallback.
• Wrap the upgrade in @supports: Add @supports (display: grid-lanes) around a second rule on the same container. Browsers that parse the new value override the baseline; browsers that do not, ignore the block.
• Switch display to grid-lanes inside the block: Set display: grid-lanes on the container. Reuse the same grid-template-columns and gap so the visual rhythm matches the fallback.
• Tune flow-tolerance for source order: Drop flow-tolerance below 1em if your layout cares about reading order, like a news feed. Raise it above 1em for tighter packing where source order matters less.
• Test the fallback in DevTools: Open DevTools, disable the @supports block, and confirm the plain Grid layout still renders cleanly. This is the layout your non-Safari users see today.

/* Progressive enhancement for CSS Grid Lanes. */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1rem;
}

@supports (display: grid-lanes) {
  .gallery {
    display: grid-lanes;
    flow-tolerance: 1em;
  }
}

What are the known issues with CSS Grid Lanes?

CSS Grid Lanes is a young layout mode and the support gaps and quirks below catch teams that adopt it too aggressively.

• Tab order vs source order mismatch: Items pack into the closest-to-top lane, so the visual order can drift far from the DOM order. Keyboard and screen reader users still follow source order, which can break perceived flow.
• Opera regression on 127 and later: Opera 124 and 125 ran the older masonry value behind a flag, but Opera 127 dropped it while the Chromium engine renames the property. Plan for zero Opera coverage on current builds.
• Firefox uses the legacy syntax: Firefox still parses grid-template-rows: masonry, not display: grid-lanes. A single stylesheet has to ship both forms until Mozilla updates the engine.
• Cross-browser packing differences: In my experience, Safari, Chrome, and Firefox each apply slightly different flow-tolerance defaults, which means the same markup produces visibly different layouts during cross-browser QA. Always pin flow-tolerance explicitly.
• Print and PDF rendering is undefined: The spec does not yet describe how lanes break across pages. Printing a grid-lanes container today produces inconsistent output, so use display: grid for any print stylesheet.

Citations

All CSS Grid Lanes version numbers, syntax notes, and platform behaviors in this guide come from these primary sources:

• WebKit blog, Introducing CSS Grid Lanes: webkit.org/blog/17660/introducing-css-grid-lanes
• WebKit blog, When will CSS Grid Lanes arrive: webkit.org/blog/17758/when-will-css-grid-lanes-arrive
• Chrome Platform Status, CSS Grid-Lanes (Masonry): chromestatus.com/feature/5149560434589696
• W3C CSS Grid Layout Module Level 3: www.w3.org/TR/css-grid-3
• MDN, CSS Grid Layout: developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout
• MDN, display CSS property: developer.mozilla.org/en-US/docs/Web/CSS/display
• Mozilla Hacks, masonry layout in Firefox: hacks.mozilla.org/2020/06/an-implementation-of-masonry-in-css-grid
• CSS Working Group GitHub, grid-lanes resolution: github.com/w3c/csswg-drafts/issues/4650
• Wikipedia, CSS Grid Layout: en.wikipedia.org/wiki/CSS_grid_layout