# Grid Lanes (CSS-only masonry)

Status: Safari 26.4 (April 2026); Chrome, Edge und Firefox hinter Flags. Nicht Baseline.  
Quelle: https://webkit.org/blog/17862/webkit-features-for-safari-26-4/  
Seite: https://designforai.dev/de/css/grid-lanes

Ein Layout im Masonry-Stil, bei dem Elemente in die kürzeste Spaltenbahn fließen, ausgedrückt mit `display: grid-lanes` und der vertrauten Grid-Track-Syntax. Keine JS-Masonry-Bibliotheken.

## HTML

```html
<div class="fx-060"><div style="height:80px">1</div><div style="height:140px">2</div><div style="height:60px">3</div><div style="height:120px">4</div><div style="height:90px">5</div></div>
```

## CSS

```css
.fx-060 {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(120px,1fr));
  gap: 10px;
  font-family: system-ui
}
@supports (display: grid-lanes) {
  .fx-060 {
    display: grid-lanes
  }
}
.fx-060 div {
  background: #e0e7ff;
  border-radius: 8px;
  display: grid;
  place-items: center
}
```

Fallback: Das reguläre Grid darüber ist der Fallback (Zeilen bleiben ausgerichtet, Lücken erscheinen unter kurzen Elementen).

## Prompt

Nutze für Layouts im Pinterest-Stil `display: grid-lanes` mit `grid-template-columns: repeat(auto-fill, minmax(...))` innerhalb von `@supports (display: grid-lanes)`, mit einem normalen Grid als Fallback. Stand 2026-09 nur Safari 26.4+; ergänze keine Masonry-JS-Bibliothek.