CSS Grid Lanes (Masonry Layout) Is Here: A Complete Guide for 2026

Originally published on NextFuture Pinterest-style masonry layouts used to require JavaScript hacks, heavyweight libraries, or Flexbox column tricks that broke reflow. Not anymore. In 2026, CSS Grid Lanes (formerly known as the masonry proposal) is the native browser answer — and Safari 26 just shipped it first. If you've ever built a card grid where items have variable heights and wanted them to pack tightly without gaps, this is the feature you've been waiting for. Let's dig in. What Are CSS Grid Lanes? CSS Grid Lanes adds a new display mode that creates a masonry-style layout using the familiar grid syntax. Items flow into the axis with the most available space, resulting in a tightly packed layout without the ugly gaps you get with regular grid rows. The specification settled on the grid-lanes keyword rather than the earlier masonry proposal after years of debate between browser vendors. Here's the minimal syntax: .masonry-grid { display : grid ; grid-template-columns : repeat ( 3