CSS Grid Lanes: Das neue native Masonry-Layout

Sie haben schon Pinterest-ähnliche Layouts erstellt. Sie haben JavaScript-Bibliotheken, CSS-Multi-Column-Hacks oder komplexe Grid-Workarounds mit berechneten Row-Spans verwendet. Jeder Ansatz funktioniert, aber keiner fühlt sich nativ an.

CSS Grid Level 3 erforscht natives Masonry-ähnliches Verhalten innerhalb von Grid. Ein aktueller Vorschlag führt display: grid-lanes als mögliche Syntax für dieses Feature ein – aber bevor Sie Ihren Produktionscode umschreiben, müssen Sie verstehen, wo die Entwicklung Anfang 2026 tatsächlich steht.

Dieser Artikel behandelt das Kernkonzept hinter CSS Grid Lanes, wie es sich von traditionellem Grid unterscheidet, die Realität der aktuellen Browser-Unterstützung und was Sie vor der Einführung beachten sollten.

Was CSS Grid Lanes tatsächlich macht

Traditionelles CSS Grid arbeitet gleichzeitig auf zwei Achsen. Sie definieren sowohl Rows als auch Columns, und Items belegen explizite Zellen. Dies erzeugt vorhersehbare, rechteckige Layouts – hinterlässt aber auch Lücken, wenn Items unterschiedliche Höhen haben.

Der CSS Grid Level 3 Draft führt Masonry-ähnliches Verhalten ein, manchmal als „Grid Lanes” bezeichnet, bei dem Sie Tracks auf einer Achse (typischerweise Columns) definieren und Items auf der anderen Achse mithilfe eines Masonry-Algorithmus eng packen. Items fließen in die Lane mit dem meisten verfügbaren Platz und füllen Lücken automatisch.

Die aktuell diskutierte Draft-Syntax sieht so aus:

.container {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

Allerdings entwickeln sich Syntax und Verhalten noch weiter. Frühere Experimente verwendeten Werte wie masonry innerhalb von grid-template-rows oder grid-template-columns, und einige Engines implementierten Prototyp-Versionen dieser Ansätze. Die CSS Working Group verfeinert weiterhin, wie Masonry in Grid Level 3 integriert wird. Siehe den aktuellen Draft des CSS Grid Layout Module Level 3.

Wie sich Grid Lanes von Standard-Grid unterscheidet

Mit display: grid respektieren Items sowohl Row- als auch Column-Tracks. Kürzere Items hinterlassen leeren Raum unter sich, bis die nächste Row beginnt.

Mit Masonry-ähnlichem Grid-Verhalten hat nur eine Achse definierte Tracks. Items auf der anderen Achse stapeln sich basierend auf verfügbarem Platz, nicht nach strikten Row-Grenzen. Dies erzeugt das charakteristische versetzte Erscheinungsbild von Masonry-Layouts.

Die meisten vertrauten Grid-Features – wie das Definieren von Column-Tracks und explizite Platzierung – bleiben konzeptionell verfügbar, aber Implementierungen können variieren, solange das Feature experimentell ist. Verhalten wie Spanning und Edge-Case-Platzierung ist noch nicht vollständig interoperabel zwischen den Engines.

Waterfall- vs. Brick-Layouts

Definieren Sie Columns mit grid-template-columns, und Items fließen vertikal – das klassische Waterfall-Layout. Definieren Sie Rows mit grid-template-rows (in experimentellen Implementierungen), und Items fließen horizontal in einem Brick-Muster.

Details wie Flow-Verhalten und Ordering-Controls werden noch in der Spezifikation diskutiert und können zwischen Browser-Previews unterschiedlich sein. Verlassen Sie sich nicht auf nicht-standardisierte oder nur im Draft vorhandene Properties, es sei denn, Sie verifizieren die Unterstützung in Ihrem Ziel-Browser.

Browser-Unterstützung: Das realistische Bild

Hier wird die Produktionsplanung kompliziert.

Stand Anfang 2026 bleibt natives Masonry-Verhalten in CSS Grid experimentell in allen großen Browsern:

• Safari Technology Preview hat eine der vollständigeren Prototyp-Implementierungen.
• Chromium-basierte Browser haben mit Masonry-bezogener Syntax hinter Flags experimentiert, einschließlich früherer masonry-Track-Werte.
• Firefox hat Masonry-Experimente hinter Konfigurations-Flags implementiert.

Kein großer stabiler Browser-Channel bietet zum Zeitpunkt des Schreibens vollständig interoperable, ungeflaggte Unterstützung. Sie können den Kompatibilitätsstatus über Can I use und Browser-Release-Notes verfolgen.

Die CSS Working Group verfeinert weiterhin Integrationsdetails innerhalb von Grid Level 3.

Die praktische Erkenntnis: Deployen Sie keine Masonry-ähnliche Grid-Syntax in die Produktion ohne Fallbacks.

Progressive-Enhancement-Strategie

Feature-Detection ermöglicht Experimente bei vorhandener Unterstützung mit gracefulem Fallback:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

@supports (display: grid-lanes) {
  .container {
    display: grid-lanes;
  }
}

Browser ohne Unterstützung rendern ein Standard-Grid-Layout. Items richten sich an Rows aus, anstatt eng zu packen – eine akzeptable Baseline für viele Anwendungsfälle.

Da sich die Syntax vor der Stabilisierung ändern kann, behandeln Sie dies als Progressive Enhancement statt als langfristige Produktionsabhängigkeit.

Accessibility- und Source-Order-Probleme

Masonry-Layouts führen ein DOM-versus-Visual-Order-Problem ein. Items erscheinen an Positionen, die vom Packing-Algorithmus bestimmt werden, nicht von ihrer Source-Order. Ein Benutzer, der durch den Inhalt tabbt, kann unvorhersehbar durch das Layout springen.

Dies ist nicht einzigartig für Grid Lanes – es ist inhärent für Masonry-ähnliche Layouts. Sie sollten die Tastaturnavigation gründlich testen, besonders bei Inhalten, bei denen die Lesereihenfolge wichtig ist.

Screenreader folgen der DOM-Order unabhängig von der visuellen Platzierung. Stellen Sie sicher, dass Ihre HTML-Struktur linear gelesen Sinn ergibt.

Fazit

Für Experimente, Prototypen und Progressive-Enhancement-Layer ist Masonry-ähnliches Grid-Verhalten jetzt erkundungswürdig. Die Richtung wird innerhalb von Grid Level 3 klarer, und praktische Erfahrung heute zahlt sich aus, wenn die Browser-Unterstützung reift.

Für Produktions-Features, die konsistentes Cross-Browser-Verhalten erfordern, warten Sie ab. Beobachten Sie Spec-Diskussionen und Browser-Implementierungshinweise, bevor Sie sich festlegen.

Natives CSS Masonry ist eine langjährige Anforderung. Es nimmt endlich Gestalt an – ist aber noch nicht vollständig standardisiert oder interoperabel. Verifizieren Sie, dass die Browser-Unterstützung Ihren Anforderungen entspricht, bevor Sie es breit einsetzen.

FAQs

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..