--- title: "WWDC26: Learn CSS Grid Lanes | Apple" url: https://daily.dev/posts/wwdc26-learn-css-grid-lanes-apple-uhpitkbpu source_url: https://www.youtube.com/watch?v=NDwoB2PpwgY type: video:youtube source: "Apple Developer" published: 2026-06-08T21:25:19.806Z updated: 2026-06-08T21:32:46.368Z tags: ["css", "safari"] reading_time: 10 upvotes: 3 comments: 0 language: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # WWDC26: Learn CSS Grid Lanes | Apple **[Apple Developer](https://daily.dev/sources/appledeveloper)** · 10 min read · 3 upvotes · 0 comments ## Summary CSS Grid Lanes is a new CSS layout mode available in Safari 26.4 that enables masonry-style layouts natively without JavaScript. It sits between Flexbox and CSS Grid, distributing content across multiple lanes while preserving each item's natural proportions. Using the new `display: grid-lanes` property, developers can create waterfall (column) or brick-wall (row) layouts in just three lines of CSS. Key features include fractional units for column sizing, auto-fill with minmax() for responsive columns, item spanning with grid-column, subgrid support for nested layouts, and a flow-tolerance property that controls how strictly the browser picks the shortest column. Web Inspector in Safari also includes full Grid Lanes debugging support with overlay lines, order numbers, and gap visualization. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Similar posts on daily.dev - [Introducing CSS Grid Lanes](https://daily.dev/posts/introducing-css-grid-lanes-6uomjvxlc) · Hacker News · 27 upvotes · 1 comments --- Tags: [#css](https://daily.dev/tags/css), [#safari](https://daily.dev/tags/safari) [View this post on daily.dev](https://daily.dev/posts/wwdc26-learn-css-grid-lanes-apple-uhpitkbpu)