CSS Grid Level 3, auch bekannt als „Masonry“: Bitte um Hilfe beim Erfinden des Layouts

• Ein Vorschlag ist in Arbeit, um das Masonry-Layout von CSS Grid (auch als Ziegelstapel- oder Wasserfall-Layout bekannt) zu CSS Grid Level 3 hinzuzufügen

  • Das Masonry-Layout ist ein Muster, bei dem Inhalte dicht wie Ziegel oder eine Steinmauer angeordnet werden; Inhalte unterschiedlicher Größe können platziert werden, ohne sie zuzuschneiden oder wegzulassen, und der Inhalt fließt spaltenweise nach unten
  • Bisher war dies ein Layout, das sich ohne JavaScript nur mit CSS nur schwer umsetzen ließ

• Um den Masonry-Mechanismus in CSS zu implementieren, wurden vier Demos erstellt

  • Ein klassisches Masonry-/Wasserfall-Layout erstellen
  • Die verschiedenen Möglichkeiten zur Spaltendefinition von Grid nutzen
  • Die Funktion zum Zusammenführen von Spalten in Grid nutzen
  • Subgrid und explizite Platzierung verwenden

• Die Kombination der verschiedenen Grid-Funktionen mit Masonry ermöglicht deutlich kreativere und dynamischere Layouts

  • Flexible und vielfältige Definition von Spaltengrößen mit fr-Einheiten, max-content, min-content und der Funktion minmax()
  • Durch das Zusammenführen von Spalten lassen sich bestimmte Elemente hervorheben oder abwechslungsreiche Grid-Kompositionen erstellen
  • Mit Subgrid lassen sich die Tracks verschachtelter Grids an das übergeordnete Grid anpassen
  • Mit expliziter Platzierung kann die Position bestimmter Elemente wie Headern festgelegt werden

• Es gibt auch die Auffassung, dass das Masonry-Layout als eigener display-Typ getrennt werden sollte

  • Es gibt Bedenken, dass die Kombination von CSS Grid und Masonry die Komplexität erhöht und sich negativ auf die Performance auswirken könnte
  • Wenn Masonry von Grid getrennt wird, könnten sich beide Funktionen unabhängig voneinander weiterentwickeln
  • Es gibt aber auch die Meinung, Masonry solle nur als eingeschränktes Layout mit gleich breiten Spalten umgesetzt werden

• Es wird davon ausgegangen, dass die Einbindung von Masonry in CSS Grid mehr Vorteile bietet

  • Die Spezifikation für CSS Grid Level 3 wurde bereits geschrieben und in zwei Browser-Engines implementiert
  • Künftig könnten Grid und Masonry mit denselben neuen Funktionen ausgestattet werden, zum Beispiel mit Track-Styling
  • Auch konzeptionell passt Masonry gut, da es ebenfalls eine Art von Grid ist

• Die Meinungen von Webdesignern und Entwicklern sind gefragt

  • Sollte Masonry Teil von CSS Grid werden?
  • Sollten alle Grid-Funktionen wie unterschiedliche Spaltengrößen, Spaltenzusammenführung, Platzierung und Subgrid nutzbar sein, oder ist es besser, nur gleich breite Spalten zu unterstützen?
  • Wie würde diese Funktion genutzt werden? Welche Layouts ließen sich damit erstellen?
  • Falls eigene Demos erstellt wurden, wird um deren Teilen gebeten
  • Gibt es Layouts, die sich mit diesem Modell nur schwer umsetzen lassen?

• Der Name Masonry ist möglicherweise nicht passend. Eine Syntax wie grid-template-rows: off im Sinn von „Zeilen abschalten“ wäre eine Überlegung wert. Bitte berücksichtigt, dass sich der Name künftig ändern könnte

Meinung von GN⁺

• Das Hinzufügen von Masonry zu CSS Grid wäre aus unserer Sicht eine bedeutende Änderung, die die Ausdruckskraft von Web-Layouts deutlich erhöhen könnte. Besonders attraktiv ist, dass sich spaltenorientierte Grids damit leicht umsetzen ließen
• Dagegen fällt es schwer, der Auffassung zuzustimmen, Masonry als eigenen display-Typ abzutrennen und in seinen Funktionen einzuschränken. Gerade in Kombination mit den leistungsfähigen Grid-Funktionen dürfte sich der Einsatzbereich von Masonry-Layouts deutlich erweitern
• Der Name Masonry ist allerdings nicht besonders intuitiv und könnte für Verwirrung sorgen. Es wäre daher sinnvoll, eine andere Bezeichnung für ein reines Spalten-Grid zu prüfen. Eine Syntax wie grid-template-rows: none, die die Bedeutung „Grid ohne Zeilen“ klar vermittelt, könnte besser sein
• Es ist zu erwarten, dass dieser Vorschlag CSS Grid zu einem noch leistungsfähigeren Werkzeug macht. Es scheint wichtig zu sein, verschiedene Layout-Beispiele auszuprobieren und aktiv Feedback zu geben

[GN⁺]

Hacker-News-Kommentare

Zusammenfassung:

• Die CSSWG und die DevRel-Teams der Browser-Anbieter diskutieren seit 2020 darüber, wie ein Masonry-Layout offiziell in CSS aufgenommen werden kann
  • Das WebKit-Team hat beschlossen, diese Diskussion öffentlich zu führen, um Rückmeldungen von Designern und Entwicklern einzuholen
  • Das könnte ein wichtiger Präzedenzfall werden und ist eine grundlegende Debatte darüber, ob alle Layout-Optionen als Teil von CSS Grid behandelt werden sollen oder ob weiterhin je nach Bedarf neue CSS-Display-Properties hinzugefügt werden sollen
• Die Analogie, ein Masonry-Layout mit dem Stapeln von Ziegeln zu vergleichen, ist zwar amüsant, aber wenn man echte Ziegel so stapeln würde, wäre das ein statisches Desaster
• Die Megamenu-Demo ist ein Beispiel für einen ungeeigneten Einsatz des Masonry-Layouts, da sie den Lesefluss durcheinanderbringt und Erwartungen massiv enttäuscht
  • Sehbehinderte Nutzer würden immer in der „falschen“ Reihenfolge lesen
  • Man hätte es als Spalten mit break-inside: avoid umsetzen sollen
• Auch die Zeitungs-Demo ist aus ähnlichen Gründen etwas fragwürdig
• Für Bilder oder Medien in unabhängigen Blöcken funktioniert ein Masonry-Layout besser
• Da diese Demos auf dem Grid-Layout basieren, erscheinen sie in nicht unterstützenden Browsern dennoch in einem sinnvollen Format mit festen Zeilen
• Mir gefällt das allgemeine Gefühl von Masonry-/Waterfall-Layouts
  • Allerdings wäre ein Layout wünschenswert, das den Lesefluss von links nach rechts stärker bewahrt als die Standardausrichtung von Masonry
• Überlegungen dazu, wie man ein Layout-System entwerfen könnte, das CSS ersetzen kann
  • Ich frage mich, ob real implementierte Systeme wie Qt, Tk oder SwiftUI etwas besser machen
  • Wie könnte man Entwicklern eine bessere Schnittstelle bieten?
• Vorstellung eines Beispiels, bei dem auf der eigenen Foto-Website ein Masonry-Effekt ohne JS umgesetzt wurde
  • Mit display:inline-block werden Fotos wie Text behandelt, sodass sie beim Zeilenumbruch neu umfließen
  • Das Ergebnis ist zufriedenstellender als bei Masonry-Bibliotheken
• Es gibt bereits Flexbox und Grid-Layout, daher stellt sich die Frage, ob es sinnvoll ist, CSS noch mehr „Layout“-Optionen hinzuzufügen
  • Eine bessere Lösung könnte ein letztlich constraints-basiertes System sein, das alle Layout-Fälle abdeckt, auch wenn es komplex wäre
• Es ist schön zu sehen, dass das WebKit-Team wieder öffentlich großartige Arbeit leistet