CSS Grid Lanes is a new layout feature available in Safari Technology Preview 234 that enables masonry-style layouts using `display: grid-lanes`. It leverages CSS Grid's column/row definition syntax to create flexible, responsive layouts without media queries. Items automatically flow into lanes based on available space, similar to traffic changing lanes. The feature supports spanning items across lanes, explicit placement, bidirectional layouts (waterfall or brick), and includes an `item-tolerance` property to control placement sensitivity. Grid Lanes makes complex layouts like photo galleries, article grids, and mega menus significantly easier to implement with minimal CSS.
Table of contents
How Grid Lanes workThe power of GridChanging directionsPlacement sensitivityTry it outWhat’s next?1 Comment
Sort: