CSS Grid Lanes: Was kann das native Masonry-Layout?

CSS Grid Lanes: Das native Masonry-Layout kommt ohne JavaScript

Michael Dobler

Autor Dr. Web

10. August 2026

2 Min. Lesezeit

CSS Grid Lanes bringt das sogenannte Masonry-Layout, also versetzte Kachelraster im Stil von Pinterest, ohne eine einzige Zeile JavaScript in den Browser. Neun Jahre stritt das CSS-Gremium über die richtige Syntax, seit Anfang 2026 steht die Entscheidung. Für Agenturen und Inhouse-Teams verliert damit eine verbreitete Layout-Aufgabe ihre Abhängigkeit von Fremdbibliotheken.

drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen

Das Wichtigste in Kürze

CSS Grid Lanes ordnet unterschiedlich hohe Elemente lückenlos in Spalten an, bisher die Domäne von Bibliotheken wie Masonry.js.
Die Syntax nutzt das bekannte Grid-Raster: display: grid-lanes plus grid-template-columns.
WebKit setzt das Feature als erste Engine um, Chrome und Firefox aktivieren die Funktion bislang nur über Flags.
Produktiv taugt das Feature erst mit einem Fallback, weil noch kein Browser eine stabile, breite Unterstützung liefert.

Was ist CSS Grid Lanes?

Quadrat aus Backsteinen auf weißem Grund mit Notiz — CSS Grid Lanes stapelt Elemente unterschiedlicher Höhe lückenfrei, indem der Browser jede Karte automatisch in die höchste verfügbare Position platziert

CSS Grid Lanes ist ein neuer Layout-Modus, der Elemente unterschiedlicher Höhe so stapelt, dass keine Lücken entstehen. Sie setzen display: grid-lanes auf den Container und definieren die Spalten wie beim klassischen Grid über grid-template-columns. Der Browser platziert jede Karte in die Spalte, in der sie am weitesten nach oben rückt, ganz ohne Berechnung per JavaScript.

Über die Eigenschaft flow-tolerance steuern Sie, wie streng dieser Abgleich ausfällt. Der Standardwert liegt bei 1em. Bis Anfang 2026 trug diese Eigenschaft den Namen item-tolerance, erst am 7. Januar entschied sich das CSS-Gremium für flow-tolerance.^[1] Das Grundprinzip ist nicht neu: Bibliotheken wie Masonry.js lösen dieselbe Aufgabe seit über einem Jahrzehnt mit JavaScript, das bei jeder Größenänderung nachrechnen muss. CSS Grid Lanes reiht sich in eine Serie von Funktionen ein, mit denen der Browser die lesbare Textfarbe selbst bestimmt oder Formularfelder ohne Skript mitwachsen lässt.

Warum zog sich der Masonry-Streit neun Jahre hin?

Der Streit drehte sich um eine Grundsatzfrage: Sollte das Masonry-Layout ein Wert des bestehenden display: grid werden oder ein eigener Layout-Typ? Apples WebKit-Team wollte die Grid-Logik wiederverwenden, damit Entwickler nur ein System lernen. Chromes Team warnte vor Leistungsproblemen, weil der volle Grid-Algorithmus für versetzte Raster zu viel Rechenzeit kostet.

Los ging die Debatte bereits 2017. Am Ende einigten sich alle Beteiligten auf einen Kompromiss: einen eigenständigen Modus namens grid-lanes, der die vertraute Grid-Syntax erbt.^[2] Verworfen wurden unterwegs Namen wie grid-masonry, compact-grid und axial-grid.

Native Layout-Funktionen wie CSS Grid Lanes senken die Wartungslast eines Projekts, weil eine ganze JavaScript-Bibliothek entfällt. Der eigentliche Gewinn liegt nicht im Effekt, sondern im Code, den niemand mehr pflegen muss.
— Markus Seyfferth, Chefredakteur Dr. Web

CSS Grid Lanes auf einen Blick

Das native Masonry-Layout und sein Weg in die Browser

Drei Eckdaten

2017

Jahr, in dem die Debatte um die Syntax begann

9 Jahre

bis zur Einigung auf den Namen grid-lanes

1em

Standardwert der Eigenschaft flow-tolerance

Browser-Unterstützung im Überblick

Safari (WebKit)

Erste Engine mit der finalen Syntax, verfügbar in der Technology Preview 234, noch nicht im stabilen Safari.

Chrome und Edge

Hinter einem Flag seit Chromium 140, bislang unter dem älteren Namen display: masonry.

Firefox

Über about:config aktivierbar, die Umstellung auf grid-lanes läuft.

.raster {
  display: grid-lanes;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

Was bedeutet CSS Grid Lanes für Ihr Projekt?

Bauen Sie CSS Grid Lanes heute am besten nur als Verbesserung für moderne Browser ein, nie als einzige Grundlage Ihres Layouts. Mit der Abfrage @supports (display: grid-lanes) halten Sie für ältere Browser ein schlichtes Spalten- oder Flexbox-Raster bereit, sodass niemand vor einer kaputten Seite steht.

Ein Vorteil gegenüber den alten Skripten betrifft die Barrierefreiheit: WebKit ordnet die Kacheln so an, dass die Tab-Reihenfolge dem Quelltext folgt, während viele JavaScript-Lösungen die Elemente umsortieren.^[1] Gerade seit dem Barrierefreiheitsstärkungsgesetz vom 28. Juni 2025 zählt eine nachvollziehbare Lesereihenfolge für viele Websites zur Pflicht. Für neue Projekte lohnt ein Test schon jetzt, in der Produktion warten Sie besser auf stabile Versionen von Safari, Chrome und Firefox.