Menu

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

DEV Community: css·Leo·4 days ago
#H4CCrsfo
#devtocss#devto#dev#grid#lanes
Reading 0:00
15s threshold

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 ; }

Enter fullscreen mode

Exit fullscreen mode

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.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.