Native CSS masonry layout
Safari 26 ships CSS Grid Lanes for native masonry layouts without JavaScript Apple DeveloperTL;DW
- CSS Grid Lanes enables native masonry layouts without JavaScript, available now in Safari 26.4 and behind flags in other browsers.
- Grid Lanes places items in whichever column is shortest, creating tightly packed staggered layouts that preserve natural aspect ratios without distortion.
- Define Grid Lanes with three CSS properties: display: grid-lanes; grid-template-columns (or grid-template-rows); and gap, similar to existing Grid syntax.
- Use fr (fractional unit) for responsive columns: grid-template-columns: 1fr 1fr 1fr creates three equally-sized columns from available space.
- auto-fill with minmax() lets the browser create as many columns as fit: grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)).
- Individual items can span multiple columns with grid-column: span N; or placed exactly with grid-column: 2 / 4, while rows are determined automatically.
- Nest Grid Lanes layouts using display: grid-lanes and grid-template-columns: subgrid inside items to make their contents join the parent layout.
- flow-tolerance (default 1em) controls which column receives the next item by setting acceptable height differences; higher values create more uniform rows.
- Web Inspector shows column/row lines, item placement order numbers, and gaps for full Grid Lanes debugging and visualization.
- Grid Lanes works with any content type—images, text, mixed media—automatically sizing heights and handling different aspect ratios without crops or stretches.
TL;DW
- CSS Grid Lanes enables native masonry layouts without JavaScript, available now in Safari 26.4 and behind flags in other browsers.
- Grid Lanes places items in whichever column is shortest, creating tightly packed staggered layouts that preserve natural aspect ratios without distortion.
- Define Grid Lanes with three CSS properties: display: grid-lanes; grid-template-columns (or grid-template-rows); and gap, similar to existing Grid syntax.
- Use fr (fractional unit) for responsive columns: grid-template-columns: 1fr 1fr 1fr creates three equally-sized columns from available space.
- auto-fill with minmax() lets the browser create as many columns as fit: grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)).
- Individual items can span multiple columns with grid-column: span N; or placed exactly with grid-column: 2 / 4, while rows are determined automatically.
- Nest Grid Lanes layouts using display: grid-lanes and grid-template-columns: subgrid inside items to make their contents join the parent layout.
- flow-tolerance (default 1em) controls which column receives the next item by setting acceptable height differences; higher values create more uniform rows.
- Web Inspector shows column/row lines, item placement order numbers, and gaps for full Grid Lanes debugging and visualization.
- Grid Lanes works with any content type—images, text, mixed media—automatically sizing heights and handling different aspect ratios without crops or stretches.
CSS Grid Lanes adds a new display: grid-lanes mode that places each item in the shortest column, preserving aspect ratios without gaps. Includes grid-template-columns, item spanning, nesting, and a flow-tolerance property to prevent visual-to-tab-order mismatches. Available in Safari 26.4.