CSS Grid Lanes

 (webkit.org)
6 Punkte von GN⁺ 2025-12-20 | 2 Kommentare | Auf WhatsApp teilen
  • In Safari Technology Preview 234 wurde mit Grid Lanes eine neue CSS-Funktion eingeführt, um Masonry-Layouts im Web umzusetzen
  • Mit der Eigenschaft display: grid-lanes lassen sich responsive Grids ohne Media Queries erstellen, und mit grid-template-columns können flexible Spalten definiert werden
  • Über die Eigenschaft item-tolerance lässt sich die Empfindlichkeit der Platzierung anpassen, um visuelle Ungleichgewichte durch unterschiedliche Inhaltsgrößen zu verringern
  • Sowohl Spalten- als auch Zeilenrichtung werden unterstützt; je nach Definition von grid-template-columns oder grid-template-rows wird der Fluss automatisch bestimmt
  • Die CSS Working Group diskutiert noch einige Detailnamen von Eigenschaften, während das WebKit-Team Standardisierung und Implementierung parallel vorantreibt und Entwickler zum Experimentieren ermutigt

Überblick über CSS Grid Lanes

  • Grid Lanes ist ein neuer Anzeigemodus, um Layouts im Masonry-Stil nativ mit CSS im Web umzusetzen
    • Mit display: grid-lanes wird es mit einer Syntax verwendet, die dem bestehenden grid ähnelt
    • Mit grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) lassen sich flexible Spalten mit einer Mindestbreite von 250px erzeugen
  • Mit der Eigenschaft gap wird der Abstand zwischen Elementen festgelegt, wodurch sich das Layout ohne Media Queries an alle Bildschirmgrößen anpasst
  • In Safari Technology Preview 234 experimentell nutzbar, inklusive einer Demo-Seite von WebKit

So funktioniert Grid Lanes

  • Der Browser platziert jedes Element automatisch in der obersten verfügbaren Spalte
    • Ähnlich wie bei Masonry.js wird das nächste Element der aktuell kürzesten Spalte hinzugefügt
    • Beim Navigieren per Tab können Nutzer die sichtbaren Inhalte horizontal erkunden
  • Beim Laden von Infinite-Scroll-Inhalten ist auch ohne JavaScript eine automatische Anordnung möglich
Anzeige

Erweiterungen von CSS Grid

  • Unterschiedliche Lane-Größen: Mit der grid-template-*-Syntax lassen sich schmale und breite Spalten abwechselnd anordnen
    • Beispiel: grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr) minmax(16rem, 2fr)) minmax(8rem, 1fr)
  • Unterstützung für Span von Elementen
    • Bestimmte Elemente können sich über mehrere Spalten erstrecken (grid-column: span 4 usw.)
    • Beispiel-Demo: ein Layout im Stil von Zeitungsartikeln
  • Explizite Platzierung ist möglich
    • Beispiel: header { grid-column: -3 / -1; }, um den Header an den letzten Spalten zu fixieren

Richtungswechsel

  • Unterstützt sowohl spaltenbasierte (waterfall) als auch zeilenbasierte (brick) Layouts
    • Bei Definition von grid-template-columns wird automatisch die Spaltenrichtung gesetzt, bei grid-template-rows die Zeilenrichtung
    Anzeige
  • grid-auto-flow: normal ist der Standardwert und wird entsprechend der definierten Richtung automatisch interpretiert
  • Die CSS Working Group diskutiert derzeit Bezeichnungen für Eigenschaften zur Flusssteuerung (grid-lanes-direction usw.)
    • Die entsprechenden Diskussionen laufen in einem GitHub-Issue von CSSWG-drafts

Anpassung der Platzierungsempfindlichkeit: item-tolerance

  • item-tolerance bestimmt, wie streng Größenunterschiede bei der Platzierung von Elementen unterschieden werden
    • Der Standardwert ist 1em; kleinere Unterschiede werden als gleiche Höhe behandelt
    • Je höher der Wert, desto weniger bewegen sich Elemente seitlich, je niedriger, desto feiner wird ihre Position angepasst
  • Aus Sicht der Barrierefreiheit sollte ein geeigneter Wert gewählt werden, um visuelle Sprünge beim Tab-Navigieren zu minimieren
  • Der Eigenschaftenname ist derzeit als item-tolerance definiert, könnte aber in flow-tolerance oder pack-tolerance geändert werden
Anzeige

Experimente und Anwendungsbeispiele

  • In Safari Technology Preview 234 werden mehrere Demos bereitgestellt
    • Fotogalerien, zeitungsartige Artikel, Museumsseiten, Mega-Menü-Layouts usw.
  • Beispielcode: 
    .container {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(max-content, 24ch));
  column-gap: 4lh;
}
  • Nicht nur für Bilder nützlich, sondern auch für Footer oder Menüs mit vielen Links

Ausblick

  • Die CSS Working Group arbeitet noch an der Festlegung der verbleibenden Eigenschaftsnamen
  • Das WebKit-Team verfolgt seit Mitte 2022 parallel Implementierung und Standardisierung
  • Entwickler werden dazu ermutigt, Demos zu erstellen und Feedback zu geben
    • Jen Simmons sammelt Rückmeldungen über Bluesky und Mastodon
  • Die grundlegende Syntax ist inzwischen stabil, sodass die Vorbereitung für den Einsatz in realen Projekten abgeschlossen ist

Verwandte Beiträge

2 Kommentare

 
shakespeares 2025-12-21

Dann muss man ja Grid-lanes für Safari und grid für Firefox getrennt verwenden. Bitte bringt das doch etwas mehr mit dem Webstandard in Einklang ...
 
GN⁺ 2025-12-20
Hacker-News-Kommentare

  • Ein Applaus für das Safari-Team. Dass sie im Oktober plötzlich ganz nach oben in der Interop-2025-Rangliste geschossen sind, ist wirklich erstaunlich

    • Seit iOS 26 habe ich deutlich gespürt, dass Safari ein enormes Web-Feature-Update bekommen hat. Nicht nur WebGPU, auch die fehlenden Teile der OPFS API wurden ergänzt, sodass sie jetzt praktisch nutzbar ist. Außerdem kam die CSS-Eigenschaft field-sizing hinzu, die das Problem löst, dass Text-Eingabefelder nicht automatisch mit dem Inhalt mitwachsen
    • Safari wird bei jeder großen Veröffentlichung als „der beste Browser“ gelobt, bekommt dazwischen aber oft viel Kritik. Ich denke, das liegt daran, dass andere Browser kontinuierliche Updates ausrollen, während Safari einem traditionellen Release-Zyklus folgt
    • Eigentlich ist das keine Überraschung. Ich beobachte seit einigen Jahren, dass das Safari-Team konsequent moderne HTML- und CSS-Features ausliefert
    • Während das Chrome-Team experimentelle Features wie WebPCIe bewirbt, hat Safari Features geliefert, die Nutzer tatsächlich wollen. Zum Beispiel wurden Effekte wie verschwommene Hintergründe schon viel früher unterstützt
    • Schade ist nur, dass Safari immer noch kein 64-Bit-wasm unterstützt. In der WebAssembly-Featureliste steht zwar „100% unterstützt“, aber in Wirklichkeit fehlen wichtige Teile

  • Ich hoffe, dass CSS Gap Decorations bald kommt. Es nervt, weiter unnötige Hacks verwenden zu müssen, um hübsche Trennlinien zwischen Flex- oder Grid-Items zu bauen

    • Wie wäre es damit, Tabellen zu verwenden? Sie sind schon viel besser als früher, aber wir wollen immer noch mehr. Der Mensch scheint nie zufrieden zu sein

  • Ich habe in einem aktuellen Projekt ein Masonry-Layout verwendet; die Performance ist okay, aber weil es auf absolute positioning basiert, ist es ziemlich hacky. Man muss das Seitenverhältnis der Objekte vorher kennen und beim Resize neu berechnen. Deshalb hoffe ich auf baldigen nativen Support

    • Geht mir genauso. Ich warte darauf, dass CSS das Problem löst, und auf den Tag, an dem ich die letzten 1,3 KB JavaScript von meiner Homepage entfernen kann — darauf warte ich seit 2019. Danke an alle, die an diesem Feature arbeiten

  • Solche Ankündigungen sind cool, aber sie haben auch etwas von einer tragischen Komödie. Weil Apple den Browser nicht kontinuierlich aktualisiert, dauert es sehr lange, bis man neuen Features in der Praxis wirklich vertrauen und sie einsetzen kann

  • Masonry-Layouts sehen zwar gut aus, aber ich finde, sie machen es schwer, die Bilder als Ganzes auf einen Blick zu erfassen

    • Vieles im Web-„Design“ konzentriert sich mehr auf die Optik als auf die Nutzbarkeit. Kaum jemand benutzt das Produkt tatsächlich; man schaut nur auf Scroll-Animationen und sagt „cool“
    • Wenn alle Bilder im Quer- oder Hochformat sind, geht es noch, aber wenn sie gemischt sind, wirkt das Layout chaotisch

  • Ich frage mich, warum man es nicht einfach Masonry genannt hat. Andererseits ist der Name grid-lanes beschreibend und dadurch leichter zu verstehen

  • Ich frage mich, wie lange es dauert, bis LLMs diese neue CSS-Syntax präzise lernen

  • Wenn ich mir eine Webseite mit einem Text-Grid aus beliebigen Größen und Positionen anschauen müsste, wäre es mir lieber, jemand würde mich erschießen
    Demo-Bild eines zeitungsartigen Grids

    • Hast du noch nie Zeitung gelesen?
    • Ich finde so ein Design gut. Man kann damit im Web ein asymmetrisches, aber effizientes Layout wie in einer Zeitung umsetzen
    • Aber für mich verletzt das die grundlegenden Designprinzipien Ausrichtung und Gruppierung
    • Lustigerweise finde ich genau das wirklich cool
    • NYTimes.com fällt mir sofort als genau so ein Beispiel ein

  • Ich persönlich mag Lane-Layouts nicht. Es ist schwer, alle Elemente einer Liste der Reihe nach zu betrachten, und der Blick springt ständig nach oben und unten, was kognitiv ermüdend ist

    • Aber wenn man nicht alle Elemente systematisch durchgehen muss, sind Lane-Layouts auch okay. Für Seiten wie Pinterest, auf denen man Inhalte auf einen Blick aufnimmt, passt das gut
    • Es sieht gut aus, ist aber unbequem, wenn man es intensiv nutzt
    • Das Ziel ist nicht Effizienz, sondern einen Gesamtüberblick auf einen Blick zu ermöglichen. Wie bei Zeitungen oder Fotogalerien
    • Ironisch, dass das Feature genau dann kommt, wenn der Trend schon abflaut. UX-seitig eher schwach, aber visuell hübsch
    • Es hat etwas von rechtshemisphärischem Design. Für Seiten wie Pinterest oder Home Assistant passt es

  • Ich finde, Apple sollte Safari auf allen Plattformen zuverlässig zum Download anbieten

    • Ich erinnere mich noch daran, Safari damals unter Windows XP installiert zu haben. Seit diesem Fehlschlag scheint noch nicht genug Zeit vergangen zu sein
    • Indirekt könnte es aber möglich werden. Der neue Browser von Kagi nutzt WebKit, ist aktuell zwar nur für macOS verfügbar, aber eine Windows-Version soll irgendwann ebenfalls kommen