CSS Grid Lanes

Summary

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> <figure><img src="photo-2.jpg"></figure> <figure><img src="photo-3.jpg"></figure> </main> Let’s start by applying display: grid-lanes to the main element to create a Grid container ready to make this kind of layout. Then we use grid-template-columns to create the “lanes” with the full power of CSS Grid. In this case, we’ll use repeat(auto-fill, minmax(250px, 1fr)) to create flexible columns at least 250 pixels wide. The browser will decide how many columns to make, filling all available space. And then, gap: 16px gives us 16 pixel gaps between the lanes, and 16 pixel gaps between items within the lanes. .container { display: grid-lanes; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; } That’s it! In three lines of CSS, with zero media queries or container queries, we created a flexible layout that works on all screen sizes. Think of it like a highway of cars in bumper-to-bumper traffic. Just like the classic Masonry library, as the browser decides where to put each item, the next one is placed in whichever column gets it closest to the top of the window. Like traffic, each car “changes lanes” to end up in the lane that gets them “the furthest ahead”. This layout makes it possible for users to tab across the lanes to all currently-visible content, (not down the first column below the fold t...