CSS & layout

Grid Lanes masonry settles on Grid syntax, and flow-tolerance is now fit-tolerance

Grid Lanes masonry settles on Grid syntax, and flow-tolerance is now fit-tolerance

If you wrote flow-tolerance somewhere in a Grid Lanes prototype, rename it. Saleh Mubashar's walkthrough on Piccalilli, published 22 October, says the property is now fit-tolerance. The layout mode itself is display: grid-lanes, and according to the article it works in Safari 26.4 and later, while "support in other browsers is still evolving."

The smallest version is three declarations, and they're all ones you already know from Grid:

.masonry {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1rem;
}

That reuse is deliberate, and it took a while to get here. Rachel Andrew opened a CSSWG issue asking for a native Pinterest-style layout in 2017. Two competing shapes followed: grid-template-rows: masonry on a regular grid (Mozilla's idea, later picked up by WebKit) and a separate display: masonry mode from Chromium. In January 2025 the CSS Working Group agreed to reuse Grid's track-definition syntax, and the article says the name display: grid-lanes was settled in December 2025. Spanning works the Grid way too: grid-column: span 2 on an item.

The knob that got renamed

The browser places each item in a lane, usually the shortest one. fit-tolerance decides what counts as "shortest" when lanes are close in height. Per the source, 0 favours the tightest packing. A larger value lets the browser treat near-equal lanes as equal, so items stay closer to source order, and infinite takes that all the way. The default is normal, which resolves to 1em.

.masonry {
  fit-tolerance: 0;
}

That's the one thing I'd try today. Open a card grid in Safari, flip between 0 and infinite, and watch where the cards land. The article also notes that source order stays intact even when items move around visually, so it's worth checking keyboard order on your own content.

The caveat is the support line. One engine ships it, so for now this is progressive enhancement: browsers that don't recognise grid-lanes ignore that declaration, which means your fallback layout has to come from a declaration they do understand. What I'm watching next is whether the other engines ship it under the settled name, and how subgrid cards inside a Grid Lanes container behave in practice. The article says subgrid can work alongside it, since masonry now lives inside the Grid model.

Source: Piccalilli (piccalil.li)

Related
CSS & layout

Grid Lanes gets a Field Guide — and a fourth layout primitive to argue about

WebKit has published gridlanes.webkit.org, a Field Guide for the new display: grid-lanes layout primitive, with a playground, a cheat sheet and six demos pitting Grid Lanes against Flexbox, Multicolumn and Grid.

June 22, 2026
CSS & layout

Overlap detection lands in CSS with anchors and a shared timeline

Ahmad Shadeed shows how to notice when a decoration collides with a section using only CSS: anchor positioning measures the gap, a scroll-driven timeline carries the reaction, and timeline-scope shares it between siblings.

September 25, 2026
CSS & layout

Container queries observe the component, not the viewport

A Smashing Magazine piece by Victor Ayomipo argues that container queries have ~94% support and only 41.4% adoption because developers keep porting media-query breakpoints instead of letting components respond to their own container size.

September 19, 2026