Wie viele Ihrer Themes ziehen heute noch Masonry.js oder Isotope mit, nur damit eine Galerie ohne hässliche Lücken funktioniert? Das jahrelange Warten auf native CSS-Masonry-Layouts nähert sich dem Ende. Safari 26 liefert die erste stabile Implementierung, und im Chromium-Lager läuft der finale Praxis-Test mit Version 140.
drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügenDas Wichtigste in Kürze
- Safari 26 hat Anfang 2026 als erster Browser nativen Support stabil ausgeliefert.
- Chrome und Edge 140 unterstützen die Syntax hinter dem about:flags-Schalter „CSS Masonry Layout“.
- Die finale Spezifikation heißt
display: grid-lanes, abgelöst vom ursprünglichengrid-template-rows: masonry. - Die Syntax ergänzt CSS Grid, ersetzt es nicht.
- JavaScript-Bibliotheken wie Masonry.js und Isotope werden langfristig überflüssig.
Was sich gegenüber JavaScript-Lösungen ändert
Performance-Sprung: Masonry.js misst nach dem Rendern die Höhe jedes einzelnen Elements, berechnet die optimale Position und setzt absolute Koordinaten. Beim Resize wiederholt sich der Zyklus. Das produziert sichtbare Sprünge im Layout und verschlechtert messbar den Cumulative-Layout-Shift-Wert in den Core Web Vitals. Eine native Implementierung erledigt die Berechnung vor dem ersten Paint, ohne Sprung und ohne JavaScript-Bundle.
So sieht der neue Code aus
Drei Zeilen: Die minimale Syntax reduziert eine Pinterest-Galerie auf display: grid-lanes, grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) und gap: 1rem. Mehr braucht es nicht. Wer benannte Linien, Spans oder explizite Platzierung kennt, behält das gewohnte Grid-Mentalmodell. Eine Karte spannt sich weiterhin per grid-column-end: span 2 über zwei Spalten, während die übrigen Elemente automatisch die Lücken auffüllen. Im Rahmen der Webdesign Trends 2026 markiert das den Übergang von skriptbasierten zu deklarativen Layouts.
Progressive Verbesserung statt harter Schnitt
Sicherheit zuerst: Im aktuellen Browser-Mix bleibt das klassische CSS-Grid-Layout der Fallback. Mit der @supports-Abfrage prüfen Stylesheets, ob der Browser display: grid-lanes versteht, und schalten sonst auf eine ausgerichtete Grid-Variante zurück. Auf Safari 26 sehen Nutzer das gewünschte verschachtelte Layout, auf älteren Versionen ein leicht weniger dichtes, aber funktionierendes Raster. Wer ohnehin schon mit Flexbox und Grid arbeitet, integriert die neue Lane-Variante in einer Stunde.
Die alte Masonry-Bibliothek war eine technische Krücke, die wir jahrelang akzeptiert haben. Native Lösungen verbessern Performance und Wartbarkeit gleichzeitig.
— Michael Dobler, Herausgeber Dr. Web
Was Sie jetzt prüfen sollten
Accessibility-Check: Masonry-Layouts ordnen visuell anders, als die DOM-Reihenfolge vorgibt. Wer Tab-Reihenfolge und Screenreader-Logik sauber halten möchte, sortiert das Markup nach logischer Lesefolge, nicht nach Bildhöhen. Im Chrome-Developer-Blog finden Sie die offizielle Erläuterung samt Demos. Für produktive Projekte ist der richtige Moment, mit progressivem Enhancement zu starten und das JavaScript-Plugin beim nächsten Theme-Refresh zu entsorgen. Bis Chrome und Firefox ohne Flag ausliefern, bleibt es ein Safari-First-Feature.
Mehr Newshunger?
