Native Masonry-Layouts mit Grid Lanes sind im Frühjahr in Safari angekommen, doch eine zentrale Anlaufstelle zum Lernen fehlte bislang. Diese Lücke schließt das WebKit-Team nun mit einer eigenen Microsite, dem „Field Guide to Grid Lanes“. Die Seite verbindet eine interaktive Spielwiese, sechs ausgearbeitete Beispiel-Layouts und einen zehnminütigen Vortrag von der WWDC26.
drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen
Das Wichtigste in Kürze
- WebKit hat unter gridlanes.webkit.org einen interaktiven Field Guide zu Grid Lanes veröffentlicht.
- Ein Playground zeigt live, wie Waterfall- und Brick-Richtung, Track-Definitionen und Abstände wirken.
- Sechs fertige Demos reichen von der Foto-Galerie über ein Zeitungslayout bis zum Mega-Menü.
- Der Grid Inspector in Safari visualisiert, wie die Elemente über die Lanes fließen.
- Die Beispiele laufen in Safari 26.4 oder neuer, für ältere Browser zeigt der Guide saubere Fallbacks.
Was steckt im Field Guide?
Den Kern bildet ein Playground, in dem sich jede Eigenschaft sofort ausprobieren lässt. Über grid-template-columns entsteht das vertikale Wasserfall-Layout, über grid-template-rows die horizontale Backstein-Variante. Der Guide erklärt die gewohnten Track-Werkzeuge von fr über minmax() bis repeat(auto-fit, …) und führt mit flow-tolerance eine neue Eigenschaft ein. Damit legen Sie fest, ab welchem Höhenunterschied die Packung die optische Reihenfolge ändern darf, was visuelle Reihenfolge und Tab-Reihenfolge besser zusammenhält.
Warum ist das mehr als eine Doku-Seite?
Jedes Beispiel kommt aus der Praxis statt aus dem Lehrbuch. Die sechs Demos zeigen eine Foto-Galerie, Rezeptkarten, ein Zeitungslayout, ein Mega-Menü, eine Zeitleiste und ein Pinnwand-Board. Beim Debuggen hilft der Grid Inspector in den Safari-Entwicklerwerkzeugen, der die Flussrichtung und die Lane-Grenzen direkt im Layout einblendet. Wichtig bleibt die Quellreihenfolge: Grid Lanes ordnet nur optisch um, während Tastaturnavigation und Screenreader der DOM-Reihenfolge folgen. Die Grundlagen der nativen Technik hatten wir bereits beim Start in Safari erklärt.
Ein gutes Tutorial mit echtem Playground bringt ein CSS-Feature schneller in Projekte als jede Spezifikation. Diese Microsite ist deshalb fast wertvoller als das Feature selbst.
— Markus Seyfferth, Chefredakteur Dr. Web
Was Sie jetzt damit anfangen
Für den Produktiveinsatz empfiehlt sich der Weg über die progressive Verbesserung. Mit einer @supports-Abfrage prüfen Sie, ob der Browser display: grid-lanes versteht, und liefern sonst ein klassisches Grid als Fallback aus. Sobald das im Theme sitzt, lässt sich die alte JavaScript-Bibliothek beim nächsten Refresh entfernen. Teams, die ohnehin mit Flexbox und Grid arbeiten, bauen die Lane-Variante in unter einer Stunde ein. Den vollständigen Guide samt Playground finden Sie auf gridlanes.webkit.org.
