CSS Grid Lanes

• 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

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
• 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

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