Vielleicht kommt der Titel dem ein oder anderen bekannt vor: das ist die übersetzte Version meines Talks beim WordCamp Europe 2020, das letzte Woche stattgefunden hat.
Wer es verpasst hat, kann sich ein Replay des Livestreams auf YouTube ansehen. Das Video ist mit einem Timestamp verlinkt:
Wer sich schon einmal mit CSS Grid auseinandergesetzt hat, kommt früher oder später mal an den Punkt, verschachtelte Grids nutzen zu wollen. Aktuell geht das leider noch nicht, außer im Firefox: dort ist Subgrid schon seit Dezember 2019 verfügbar.
Bei CSS Grid ist es so, dass nur direkte Kindelemente in einem Grid-Container im Grid positionieren lassen. Alle „Enkelkinder“ und tiefer verschachtelter Elemente kehren zurück zum normalen „document flow“ – mir fällt für diesen Begriff gerade keine sinnvolle Übersetzung ein. 😅
Mit Subgrid ist es jetzt aber möglich, auch Elemente der zweiten Ebene im Grid zu positionieren. Das geht so bisher nicht. Der einzige Workaround aktuell ist, bei einem Kindelement erneut ein Grid zu definieren. Der Nachteil daran ist, dass sich die Grids des Eltern- und des Kindelements gar nicht „kennen“ und so gar nichts miteinander zu tun haben.
In welchen Anwendungsfällen das Subgrid hilfreich ist, zeigen zwei Beispiele, die ich während der Recherche zu dem Vortrag gefunden habe. Auch wenn im Artikel von Ken Bellows auf dev.to die Bilder in den Codepen-Beispielen nicht mehr funktionieren, so zeigt der schrittweise „Umbau“ zu CSS Grid in seinem Beispiel ganz gut, wie Subgrid eine Gleichmäßigkeit der Darstellung ermöglicht. Gerade bei Angaben mit variablen Inhalten, die sich in der Länge sehr unterscheiden können, befriedigt das den inneren Monk wirklich gut.
Auch das Beispiel von Miri Suzanne auf CodePen, welches ich Live im Vortrag gezeigt habe, demonstriert die Möglichkeiten sehr gut. Um den Unterschied zu sehen, muss man im „CSS“-Block etwas scrollen und die Kommentare rund um die CSS-Eigenschaften entfernen. Endlich können die Inhalte so unterschiedlich sein und das Layout passt sich den Inhalten an, ohne das es bescheiden aussieht. Yay!
Zum Abschluss noch eine kleine Liste an Ressourcen, die ich für meinen Vortrag genutzt habe:
- caniuse.com – zeigt den aktuellen Stand der unterstützen Browser an
- MDN Docs – ausführliche Dokumentation zu Subgrid
- Codrops: Subgrid – eine weitere ausführliche Ressource mit eigenen Beispielen
- dev.to: Ken Bellows Subgrid Artikel
- envatotuts+: CSS Subgrid: Features, Syntax and the problem it will solve
- Smashing Magazine: CSS Grid Level 2 – Here Comes Subgrid von Rachel Andrew
- YouTube: Mozilla Developer – Don’t wait to use Subgrid for better card layouts von Miri Suzanne, auch mit dem oben genannten Beispiel (hat aber ein anderes Design)
- YouTube: Mozilla Developer – Laying out forms using Subgrid – ebenfalls mit Miri Suzanne
- YouTube: Hello Subgrid – Talk von Rachel Andrew auf der CSSconf EU 2019 (Achtung, Beginn ist sehr laut)
Wer sich für die Umsetzung in Chrome und Safari auf dem laufenden halten möchte, hier die Links zu den entsprechenden Bugs in beiden Bugtrackern: