Kategorien
CSS Vorträge

Wie Subgrid CSS Grid verbessert

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:

Hier klicken, um den Inhalt von YouTube anzuzeigen

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:

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:

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.