CSS Grid Lanes
Introducing CSS Grid Lanes Dec 19, 2025 by Jen Simmons, Brandon Stewart, and Elika Etemad It’s here, the future of masonry layouts on the web! After the groundwork laid by Mozilla, years of effort by Apple’s WebKit team, and many rounds debate at the CSS Working Group with all the browsers, it’s now clear how it works. Introducing CSS Grid Lanes. .container { display: grid-lanes; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; } Try it today in Safari Technology Preview 234. How Grid Lanes work Let’s break down exactly how to create this classic layout. You can try out this demo of photo gallery layouts today in Safari Technology Preview. First, the HTML. <main class=”container”> <figure><img src=”photo-1.jpg”></figure>…
