CSS Grid Lanes: Natives Masonry-Layout in Safari

Das Masonry-Layout – jenes versetzte Raster im Pinterest-Stil, bei dem Elemente beliebiger Größe in den jeweils verfügbaren Platz fließen – läuft seit über einem Jahrzehnt in Produktion, getragen von JavaScript-Bibliotheken, Floats und Flexbox-Hacks, die fast funktionieren, bis sie es eben nicht mehr tun.¹ Auf der WWDC 2026 hat Apples Safari-Team dem Web einen nativen Layout-Modus dafür geschenkt: CSS Grid Lanes. Das Masonry-Muster selbst ist alt. Neu ist ein erstklassiger CSS-display-Typ, der es in drei Zeilen erzeugt, samt einem flow-tolerance-Regler, der Masonrys chronisches Problem mit Tab-Reihenfolge und Barrierefreiheit löst. Grid Lanes ist heute in Safari 26.4 verfügbar und in anderen Browsern hinter einem Flag.¹

TL;DR

• Grid Lanes ist ein neuer CSS-Layout-Modus, der zwischen Grid und Flexbox angesiedelt ist: Er strukturiert eine Achse und lässt die andere frei, verteilt Inhalte über mehrere Lanes hinweg zu einem dicht gepackten, versetzten Layout und bewahrt dabei die natürlichen Proportionen jedes Elements.¹
• Das Ganze sind drei Zeilen: display: grid-lanes, grid-template-columns mit fr-Tracks und gap. Tauschen Sie grid-template-columns gegen grid-template-rows, um aus einem Wasserfall eine Ziegelwand zu machen. Sie wählen eine Richtung, nicht beide.¹
• Die Track-Dimensionierung übernehmen Sie aus Grid: ungleiche fr-Verhältnisse, auto-fill mit minmax() für responsive Spaltenzahlen und sich wiederholende Schmal-/Breit-Muster.¹
• Elemente verwenden Grid-Eigenschaften, die Sie bereits kennen: grid-column: span 2 zum Verbreitern, explizite Spaltenplatzierung und grid-template-columns: subgrid, um den Inhalt einer Karte in das übergeordnete Layout zu integrieren. Sie steuern die Spaltenplatzierung, nicht die Zeile; Grid Lanes entscheidet über die Zeile.¹
• flow-tolerance ist das entscheidende Unterscheidungsmerkmal. Reine Kürzeste-Spalte-Platzierung kann dazu führen, dass die Tab-Reihenfolge gegenüber der visuellen Reihenfolge im Zickzack verläuft, was der Barrierefreiheit schadet. flow-tolerance (Standardwert 1em) lockert die Kürzeste-Spalte-Regel, sodass die Platzierung enger der Leserichtung folgt.¹
• Die Verfügbarkeit ist ehrlich: Safari 26.4 liefert es heute aus, andere Browser sperren es hinter einem Flag. Grid Lanes ist noch nicht browserübergreifend allgemein verfügbar.¹

Wo Grid Lanes zwischen Grid und Flexbox steht

Brandon vom Safari-Team baut ein Grid-Lanes-Layout von Grund auf, beginnend bei 3:39.

Jeder Layout-Modus beantwortet dieselben zwei Fragen: Wohin kommen die Elemente, und wie viel Platz bekommen sie.¹ Flexbox und Grid beantworten sie unterschiedlich, und Grid Lanes landet dazwischen.

Flexbox gibt Ihnen eine Achse und eine einzelne Lane mit Elementen, die entlang dieser Achse fließen; brechen die Elemente um, fließen sie weiter in die gewählte Richtung, Zeile oder Spalte.¹ Grid gibt Ihnen zwei Achsen, Spalten und Zeilen, und platziert Elemente in Zellen am Schnittpunkt dieser Tracks. Das Problem zeigt sich, wenn Elemente unterschiedliche Seitenverhältnisse haben: Es entstehen große leere Flächen, wo kürzere Elemente ihre Zellen nicht füllen.¹ Bei Bildern bleiben dann drei schlechte Optionen. Strecken Sie jedes Bild, um seine Zelle zu füllen, verzerren Sie es; zoomen Sie hinein, um den Platz zu füllen, läuft das Bild über seinen Container hinaus; beschneiden Sie es, riskieren Sie den Verlust wichtiger Informationen.¹

Grid Lanes löst diese Spannung auf. Wie die Session es formuliert: „Es sitzt zwischen Grid und Flex. Anstatt wie Grid über zwei Dimensionen zu strukturieren, strukturiert es nur eine und lässt die andere frei. Doch anders als bei Flex, wo Inhalt in einer einzigen Lane fließt und die Seite hinunter umbricht, verteilt Grid Lanes Inhalt über mehrere Lanes.”¹ Die Elemente werden eines nach dem anderen platziert, und jedes landet in derjenigen Spalte, in der es dem oberen Rand am nächsten ist – weshalb frühere Elemente höher sitzen und spätere darunter aufgefüllt werden.¹ Das Layout funktioniert mit beliebigem Inhalt, nicht nur mit Bildern: Textblöcke brechen passend zu ihrer Spalte um, der Browser bestimmt die Höhen, und eine Überschrift kann sich über mehrere Spalten erstrecken, um hervorzustechen.¹

Natives Masonry-Layout in drei Zeilen CSS

Der Aufbau beginnt mit einem neuen display-Typ und definiert dann die Tracks genauso wie Grid:

.gallery {
  display: grid-lanes;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

grid-template-columns legt die Anzahl der Tracks fest und wie breit jeder wird. Die fr-Einheit („fractional unit”) weist den Browser an, den verfügbaren Platz im Container zu nehmen und in Bruchteile aufzuteilen, sodass 1fr 1fr 1fr drei gleich große Spalten erzeugt, und gap fügt Abstand genau so hinzu wie in Grid.¹ Um aus dem Wasserfall eine Ziegelwand zu machen, tauschen Sie die Spalten gegen Zeilen: Ersetzen Sie grid-template-columns durch grid-template-rows, und die Elemente fließen quer in Zeilen statt nach unten in Spalten. Der einzige Haken, in den Worten der Session: „Sie wählen eine Richtung – nicht beide.”¹

Diese drei Zeilen geben mehr Kontrolle, als sie vermuten lassen. Spalten müssen nicht gleich sein: Eine mittlere Spalte kann doppelt so viel Platz einnehmen wie ihre Nachbarn. Statt die Spaltenzahl selbst festzulegen, können Sie den Browser entscheiden lassen, genau wie es responsive Grid-Layouts bereits tun:

.gallery {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

auto-fill erzeugt so viele Spalten, wie hineinpassen, und minmax() legt fest, dass jede mindestens 200 Pixel breit sein, aber wachsen darf, um den Platz zu füllen.¹ Sie können dieselbe Idee mit einem sich wiederholenden Muster aus schmalen und breiten Spalten weitertreiben. Den Gewinn bringt Brandon auf den Punkt: „Was ich am meisten liebe, ist, wie viel man mit nur wenigen Zeilen CSS machen kann.”¹

Einzelne Elemente mit vertrauten Grid-Eigenschaften gestalten

Grid Lanes gestaltet Elemente mit Eigenschaften, die in Grid bereits existieren. Beginnen Sie mit einem grid-lanes-Container mit drei gleichen Spalten. Um einem Element mehr Platz zu geben, streckt es grid-column: span 2 über zwei Spalten, und der Rest des Layouts passt sich darum herum an.¹ Sie können ein Element auch exakt platzieren: Lassen Sie es in Spalte 2 beginnen und sich über die Spalten 2 und 3 erstrecken. Die Einschränkung ist bewusst gewählt: „Sie können die Spaltenplatzierung steuern, aber nicht die Zeile. Grid Lanes entscheidet die Zeile für Sie.”¹

subgrid integriert den Inhalt einer verschachtelten Komponente in das übergeordnete Element. Eine Rezeptkarte, die sich über zwei Spalten erstreckt, enthält ein Bild und etwas Text, die standardmäßig nicht am Grid-Lanes-Layout teilnehmen. Fügen Sie der Karte display: grid-lanes und grid-template-columns: subgrid hinzu, und „ihr Inhalt schließt sich dem übergeordneten Layout als eigene Elemente an”: Das Bild nimmt eine Spalte, der Text die andere, jeweils auf seinen Inhalt dimensioniert.¹ Die Verschachtelung funktioniert in beide Richtungen – ein reguläres Grid innerhalb eines Grid-Lanes-Containers oder umgekehrt –, weil dieselben Werkzeuge und dieselbe Syntax übertragbar sind.¹

Der flow-tolerance-Regler: die Lösung für die Barrierefreiheit

Hier kommt der Teil, der Grid Lanes zu mehr macht als nur einem aufgeräumteren Masonry. Reine Kürzeste-Spalte-Platzierung sieht meistens großartig aus, aber manchmal fühlt es sich nicht ganz richtig an, und der Grund dafür ist die Barrierefreiheit.¹

Stellen Sie sich zwei Elemente in einer Reihe mit nahezu gleicher Höhe vor, wobei Element 2 ein paar Pixel kürzer ist als Element 1. Die Fläche unter Element 2 liegt näher am oberen Rand, also platziert der Browser das nächste Element dort, und Element 4 füllt die erste Spalte. Das visuelle Ergebnis liest sich in der ersten Reihe von links nach rechts und in der letzten von rechts nach links. Wie es die Session ausdrückt: „Der Unterschied zwischen der Tab-Reihenfolge und der visuellen Darstellung des Inhalts beeinträchtigt die Barrierefreiheit für Menschen und kann zu einer verwirrenden Erfahrung führen.”¹ Die Tab-Reihenfolge folgt der Quellreihenfolge; die Zickzack-Platzierung im Visuellen bricht die Übereinstimmung, auf die sich Tastatur- und Screenreader-Nutzer verlassen.

flow-tolerance ist der Regler, der die Kürzeste-Spalte-Regel lockert oder strafft.¹ Mit aktiviertem Regler fragt der Browser für jedes neue Element: „Ist die höhere Spalte kleiner als die kürzere Spalte plus flow-tolerance?”¹ Liegt der Abstand innerhalb der Toleranz, füllt das Element die Spalte, die die Platzierung im Einklang mit der Leserichtung hält; wird der Abstand zu groß, um ihn zu ignorieren, fällt das Element in die tatsächlich kürzere Spalte. Der Standardwert ist 1em:

.gallery {
  display: grid-lanes;
  grid-template-columns: 1fr 1fr;
  flow-tolerance: 1em;
}

Apples Empfehlung lautet, „verschiedene flow-tolerance-Werte auszuprobieren, um herauszufinden, was für Ihren Inhalt funktioniert.”¹ Die Kehrseite davon, dem Browser Flexibilität zu geben, ist, dass das Ergebnis Sie gelegentlich überraschen kann, und wenn es das tut, unterstützt der Web Inspector Grid Lanes vollständig: Schalten Sie das Overlay ein, und Sie erhalten Linien für Spalten und Zeilen, über jedes Element projizierte Reihenfolge-Nummern, sodass Sie genau sehen, wie die Platzierung zustande kam, sowie die zwischen den Elementen eingezeichneten Abstände.¹

Kernpunkte

Für Frontend-Entwickler: - Ersetzen Sie JavaScript-Masonry-Bibliotheken und Flexbox-Hacks durch display: grid-lanes, drei fr-Tracks und gap; nutzen Sie die Grid-Werkzeuge zur Track-Dimensionierung (auto-fill, minmax(), ungleiche fr) wieder, die Sie bereits kennen.¹ - Greifen Sie zu grid-column: span N und expliziter Spaltenplatzierung, um Elemente hervorzuheben, und zu grid-template-columns: subgrid, um verschachtelten Karteninhalt in das übergeordnete Layout zu integrieren.¹

Für Teams mit Fokus auf Barrierefreiheit: - Stimmen Sie flow-tolerance (Standardwert 1em) so ab, dass die visuelle Platzierung der Quell- und Tab-Reihenfolge folgt, und schließen Sie damit die Lücke, die Zickzack-Masonry-Platzierung für Tastatur- und Screenreader-Nutzer öffnet.¹ - Überprüfen Sie die Platzierung mit dem Grid-Lanes-Overlay des Web Inspector, das die Reihenfolge-Nummern der Elemente direkt über das Layout projiziert.¹

Für technische Leiter, die den Rollout planen: - Behandeln Sie Grid Lanes als in Safari 26.4 verfügbar, anderswo hinter einem Flag, nicht als browserübergreifend allgemein verfügbar; liefern Sie es als progressive Verbesserung mit einem eleganten Fallback für Browser aus, die noch hinter dem Flag stehen.¹

FAQ

Was ist CSS Grid Lanes?

CSS Grid Lanes ist ein neuer Layout-Modus, den das Safari-Team auf der WWDC 2026 vorgestellt hat, um Layouts im Masonry-Stil nativ zu bauen. Er ist zwischen Grid und Flexbox angesiedelt: Er strukturiert eine Achse und lässt die andere frei, verteilt Elemente über mehrere Lanes hinweg zu einem dicht gepackten, versetzten Layout und bewahrt dabei die natürlichen Proportionen jedes Elements.¹

Wie baue ich ein Masonry-Layout mit Grid Lanes?

Drei Zeilen CSS: Setzen Sie display: grid-lanes, definieren Sie Tracks mit grid-template-columns unter Verwendung von fr-Einheiten (zum Beispiel 1fr 1fr 1fr für drei gleiche Spalten), und fügen Sie ein gap hinzu. Tauschen Sie grid-template-columns gegen grid-template-rows, um einen vertikalen Wasserfall in eine horizontale Ziegelwand zu verwandeln. Sie wählen eine Richtung, nicht beide.¹

Was bewirkt flow-tolerance?

flow-tolerance lockert oder strafft die Regel, die jedes Element in die kürzeste Spalte platziert. Reine Kürzeste-Spalte-Platzierung kann dazu führen, dass die visuelle Reihenfolge im Zickzack von der Tab-Reihenfolge abweicht, was der Barrierefreiheit schadet. Mit aktiviertem flow-tolerance prüft der Browser, ob die höhere Spalte kleiner ist als die kürzere Spalte plus die Toleranz, bevor er über die Platzierung entscheidet, und hält die Elemente im Einklang mit der Leserichtung, bis der Höhenunterschied zu groß wird. Der Standardwert ist 1em.¹

Kann ich Grid Lanes heute in Produktion einsetzen?

In Safari 26.4 ist es jetzt verfügbar. Andere Browser sperren es hinter einem Flag, sodass Grid Lanes noch nicht browserübergreifend allgemein verfügbar ist. Liefern Sie es als progressive Verbesserung mit einem Fallback für Browser aus, die noch das Flag benötigen.¹

Funktioniert Grid Lanes mit den Grid-Eigenschaften, die ich bereits kenne?

Ja. Die Platzierung auf Elementebene nutzt bestehende Grid-Eigenschaften: grid-column: span 2 verbreitert ein Element, explizite Spaltenplatzierung positioniert es, und grid-template-columns: subgrid integriert den Inhalt einer verschachtelten Komponente in das übergeordnete Layout. Sie steuern die Spaltenplatzierung; Grid Lanes entscheidet über die Zeile.¹

Als praktische Referenz, sobald Sie mit dem Bauen beginnen, pflegt WebKit einen offiziellen Grid-Lanes-Feldführer unter gridlanes.webkit.org. Das Panel merkte an, dass sich Grid Lanes mit dem neuen anpassbaren Select kombinieren lässt: Ein Masonry-Layout funktioniert innerhalb eines ::picker(select)-Dropdowns.²

Grid Lanes ist genau die Art von Plattform-Erweiterung, die eine Abhängigkeit entfernt, statt eine hinzuzufügen – und das ist das ganze Argument des No-Build-Manifests sowie ein direkter Weg zu jener Art von Ergebnis, das im Bericht über das perfekte Lighthouse-Ergebnis dokumentiert ist. Natives, semantisches Layout auszuliefern statt JavaScript-gerenderter Raster hält Ihr Markup zudem für Maschinen lesbar – das Argument aus HTML ist das Format, das Agenten wollen. Der vollständige Serien-Hub ist die Apple Ecosystem Series.

Referenzen