Neue Layouts mit CSS Subgrid

• CSS Subgrid ist eine Funktion, die über die Grenzen des bisherigen Grid hinausgeht und es ermöglicht, die Struktur des übergeordneten Grids bis auf untergeordnete DOM-Elemente auszudehnen
• Bisher konnten nur direkte Kindelemente am Grid teilnehmen; mit Subgrid lassen sich jedoch auch verschachtelte Strukturen wie <ul>·<li> in derselben Grid-Zellanordnung platzieren
• Es behebt Ungleichgewichte zwischen Geschwisterelementen, die durch unterschiedliche Inhaltslängen entstehen, und unterstützt Layouts, bei denen einzelne Karten oder Abschnitte dynamisch reagieren
• Zu beachten sind jedoch Punkte wie Zeilenreservierung, Zurücksetzen der Liniennummern und Inkompatibilität mit fluiden Grids auf Basis von auto-fill
• Es wird von den wichtigsten Browsern unterstützt und lässt sich schrittweise einführen, wodurch es künftig die Flexibilität im UI-Design deutlich erhöhen kann

---

Grundkonzept von Subgrid

• Frühes CSS Grid erlaubte nur direkten Kindelementen, am Layout teilzunehmen
  • In einer Portfolio-UI sind beispielsweise die Bilder in den <li> innerhalb eines <ul> standardmäßig an eine einzelne Zelle gebunden
• Mit grid-template-rows: subgrid und grid-template-columns: subgrid werden die Zeilen- und Spaltendefinitionen des Parent-Grids übernommen
  • Jedes <li> kann direkt in den Zellen des Parent-Grids platziert werden, sodass semantische HTML-Struktur und visuelle Ausrichtung gleichzeitig erhalten bleiben
• Dasselbe Ergebnis lässt sich auch mit Flexbox und verschachtelten Grids erreichen, aber Subgrid bietet mit einer gemeinsam genutzten einzelnen Grid-Struktur einen kompakteren Ansatz

Neue Layout-Möglichkeiten

• Im Beispiel mit Portfolio-Karten besitzt jedes <article> ein zweispaltiges Grid, das Bild und Text anordnet
  • Die fr-Einheit ist flexibel, aber da jede Karte unabhängig berechnet wird, entstehen unausgewogene Spaltenbreiten
• Mit grid-template-columns: subgrid teilen sich alle Karten die Spaltenverhältnisse des Parent-Grids
  • Änderungen am Inhalt, etwa bei der Titellänge, führen dazu, dass sich das gesamte Grid automatisch neu ausrichtet
• So lassen sich wechselseitig aufeinander reagierende Layouts zwischen Geschwisterelementen umsetzen
  • Beispiel: Wird der Titel „Infinite Supercomputer“ kürzer, passen sich Bild- und Textverhältnisse aller Karten sofort an

Worauf man bei Subgrid achten sollte (Gotchas)

Reservierung von Zeilenraum

• Das Teilen von Spalten ist intuitiv, aber beim Teilen von Zeilen ist eine explizite Reservierung von Zeilen nötig
  • Damit in einem Preislisten-Kartenbeispiel die Einträge jedes <ul> in denselben Zeilen ausgerichtet werden, muss mit grid-row: span N die Anzahl der Zeilen festgelegt werden
• Da ein Subgrid standardmäßig nur eine einzelne Zelle belegt, muss für die Nutzung mehrerer Zeilen zuerst der Bereich im Parent-Grid erweitert werden

Nummerierung in verschachtelten Grids

• Subgrid übernimmt zwar die Zeilen- und Spaltentemplates des Parent-Grids, setzt aber die Liniennummern zurück
  • Selbst wenn die Linien 2 bis 5 des Parent-Grids übernommen werden, werden sie intern wieder als 1 bis 4 nummeriert
  • Jedes Grid besitzt seinen eigenen Index, daher funktionieren Liniennummern nicht als eindeutige ID, sondern als relative Indizes

Inkompatibilität mit fluiden Grids

• Ein fluides Grid in der Form repeat(auto-fill, minmax()) kann nicht zusammen mit Subgrid verwendet werden
  • Subgrid benötigt eine definierte Anzahl an Spalten; auto-fill und auto-fit werden nicht unterstützt
  • Der Autor erklärt ausdrücklich, dass er für diese Kombination keine Lösung gefunden hat

Unterstützung in älteren Browsern

• Seit 2023 wird Subgrid von den wichtigsten Browsern unterstützt, die Abdeckung liegt aber noch unter 90 %
• Mit der Bedingung @supports not (grid-template-columns: subgrid) lässt sich ein Fallback-Layout bereitstellen
  • Vorgeschlagen wird etwa eine Fallback-Struktur, bei der Bild und Text vertikal gestapelt werden

Praxisbeispiele und Fazit

• Die Entwicklerseite von Stripe (stripe.dev) baut die gesamte Seite als ein großes Grid auf und erreicht über mehrere Subgrid-Ebenen eine feingranulare Platzierung
• Subgrid ist nicht nur für große Layouts nützlich, sondern auch für kleinere UI-Anpassungen
• Es lässt sich schrittweise einführen, ohne das gesamte Projekt neu aufzubauen
• Als Mittel, um CSS-Layouts neue Flexibilität zu verleihen, ist es sehr gut für experimentelle Nutzung geeignet

[GN⁺]

Hacker-News-Kommentare

• Die Subgrid-Funktion ist wirklich großartig, aber im ersten einfachen Beispiel könnte man auch ul { display: contents } verwenden, damit die Kindelemente am Grid-Layout teilnehmen
  Wenn die Subgrid-Funktion nicht zwingend nötig ist, ist dieser Ansatz effizienter

  • Für dieses Beispiel stimmt das, aber allgemein entfernt display: contents das UL-Element vollständig aus dem Layout
    Daher kann man darauf weder Styles anwenden noch UI-Events auf diesem Element empfangen
    Wenn man das UL als hervorgehobenen Bereich oder scrollbaren Abschnitt nutzen möchte, ist Subgrid deutlich nützlicher
  • Im zweiten Beispiel sollte man, wenn die Bildbreite konstant bleiben soll, statt fr eine andere Einheit verwenden und für den Text fr, damit dieser den verbleibenden Platz ausfüllt

• Als ich früher eine Preisvergleichs-UI gebaut habe, habe ich wirklich unter dem fehlenden Subgrid gelitten
  Zwei Tabellen nebeneinander zu platzieren und die Zeilen auszurichten war unmöglich
  Man hätte es mit fester Höhe oder JS-Berechnungen lösen können, aber in einer React-Komponentenstruktur war das viel zu ineffizient

• Ich dachte, Container Queries wären vielleicht die bessere Lösung
  Aber wenn man die Konsistenz des gesamten Grids erhalten will, könnte Subgrid besser geeignet sein
  Übrigens lässt sich das mit diesem CodePen-Beispiel leicht verstehen

  • Container Queries lösen nicht das Problem, auf die Größe von Geschwisterelementen zu reagieren
    Außerdem erzeugt die Verwendung eines Containers einen neuen Stacking Context, was unpraktisch ist
    Schade, dass man Subgrid und Container nicht gemeinsam nutzen kann. Wenn Kinder auf die Subgrid-Größe referenzieren könnten, wäre das wirklich leistungsstark

• Man denkt sich dabei: „Sind wir am Ende wieder beim <table>-Layout angekommen?“

  • Ja und nein. Das frühere <table> war ein Hack zur Problemlösung, hatte aber viele Einschränkungen bei Barrierefreiheit und Technik
    Das Grid-System ist ein Werkzeug für die visuelle Anordnung und etwas anderes als Tabellen, die Datenstrukturen ausdrücken
    Jetzt, da Grid als Standard etabliert ist, würde ich es ungern weiter mit Tabellen vergleichen
  • Vor 25 Jahren haben wir auf dem Server automatisch Tabellen gerendert, um Layouts zu bauen, und damals hat das wirklich einfach funktioniert
    Aber Responsive Design oder Barrierefreiheit wurden überhaupt nicht berücksichtigt. Im Grunde haben wir Tabellen nur neu erfunden
  • Das Problem bei <table> war, dass es eine Struktur zur Beschreibung von Inhalten ist. Mit dem Grid selbst ist nichts verkehrt
  • Ich höre auch seit über 20 Jahren: „Tabellen sind für tabellarische Daten da“
    Letztlich hat CSS diese Funktion nur in verbesserter Form erneut umgesetzt

• Einer der Grid-Bugs, die ich früher erlebt habe, war, dass sich die Zellengröße an der Originalgröße des Bildes orientierte, wenn man ein <img>-Element prozentual skaliert hat
  Das trat sowohl in Firefox als auch in Chromium auf, und der zugehörige Bug ist Mozilla Bug 1857365

  • Ich frage mich, ob das Problem verschwindet, wenn man dem Bild feste width-/height-Attribute gibt

• Schade, dass CSS für Layouts oft zusätzliche Informationen über die Dokumentstruktur benötigt
  Zum Beispiel, dass man die Anzahl der Zeilen explizit angeben muss

  • Ideal wäre eine Möglichkeit, Elemente auch dann auszurichten, wenn sie unterschiedliche Eltern haben
    Oder wenn ein Flex-Container die Verteilung eines anderen Containers nachbilden könnte
    Allerdings würde das die DX wahrscheinlich deutlich komplexer machen

• Ich habe mich gefragt, warum in den Codebeispielen sowohl in der HTML- als auch in der CSS-Datei Styles stehen
  Als ich mir nur das CSS des ersten Subgrid-Beispiels angesehen habe, habe ich lange gesucht, welche Styles auf das UL angewendet wurden

• Man denkt sich dabei: „Sind wir am Ende wieder beim Grid gelandet?“
  Etwas Ähnliches haben wir schon in der alten HTML-Zeit gemacht

  • Aber das heutige Grid macht Responsive Design viel einfacher
  • Natürlich hat das jetzt auch den Nebeneffekt, dass es beim Styling mehr Bugs gibt 😅

• Joshs Blogposts sind immer beeindruckend
  Die Klarheit seiner Texte, sein Gespür für Design und sogar die interaktive Website sind allesamt hervorragend

  • Ich bin auch Abonnent seiner Mailingliste. Ich freue mich jedes Mal auf neue Beiträge

• Für mich persönlich bleibt Grid trotzdem umständlich
  Die Syntax fühlt sich seltsam an, und ich habe kein gutes Gefühl für das Layout. Flexbox ist viel intuitiver und flexibler

  • Die beiden Techniken gehen Probleme unterschiedlich an
    Flexbox ist inhaltszentriert, Grid steuert Größen containerzentriert
  • Ich probiere Grid auch manchmal wieder aus, aber mir fehlen immer noch Funktionen
    Inhalte richten sich nicht automatisch über mehrere Achsen hinweg aus, und man muss alles manuell platzieren
    Vielleicht habe ich das Wesen von Grid nicht richtig verstanden, oder es passt einfach nicht zu der Art von Arbeit, die ich mache
  • Auch beim Erstellen von Responsive Designs ist Flexbox viel einfacher als Grid