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 , 1 fr )); 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 > < img src = "photo-2.jpg" > < figure > < img src = "photo-3.jpg" >
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.
... continue reading