Die Entwicklung für CSS Layout ist nicht aufzuhalten. Nachdem das Flexible Box Layout (aka “Flexbox”) inzwischen salonfähig ist, steht bereits die nächste CSS-Spezifikation vor der Tür. Diese soll nicht nur einfache Layout-Eigenschaften einfacher und direkter möglich machen (Stichwort “vertikal zentrieren”), sondern auch bisher nicht mögliche Layouts direkt in CSS ermöglichen, ohne das Markup anpassen zu müssen.

Und auch wenn es sicher Überschneidungen gibt, will CSS-Grid Flexbox nicht ablösen. Letzteres hat nach wie vor seine Daseinsberechtigung. Während Flexbox auf das eindimensionale Ausrichten und Verteilen abzielt (also in einer Reihe oder Spalte ausrichten), ist CSS-Grid für die zweidimensionale Ausrichtung und Verteilung konzipiert.

Nachdem inzwischen alle modernen Browser CSS Grid unterstützen, gibt’s im Folgenden einen kurze Übersicht.

Ein einfaches Beispiel

Wie bei Flexbox braucht man einen Container, in welchem man das Grid definiert. Alle Kindelemente werden dann im Grid gelayoutet.

Im CSS definiert man mit display: grid den Container (hier mit der Klasse .grid) und gibt mit grid-template-rows und grid-template-columns die Vorlage vor.

Hier wir den einfachsten Fall mit 4 gleichmäßigen spalten (grid-template-columns: 25% 25% 25% 25%) und 2 Zeilen (grid-template-rows: 50% 50%); Jede Spalte/Zeile wird dabei mit Leerzeichen getrennt und kann eine Breitenangabe sein (z.B. 25%, 200px oder auto).

Möglich wäre hier auch die neue Einheit fr. Dadurch wird der freie Platz entsprechen aufgeteilt.

grid-template-columns: 25% 25% 1fr 2fr würde bspw. vier Spalten festlegen, die erste beiden würden jeweils 25% belegen und die dritte und vierte würden sich die restlichen 50% im Verhältnis 1/2 aufteilen.

Zuletzt sei noch grid-gap (Abkürzung für grid-row-gap and grid-column-gap) erwähnt. Dadurch werden die Zwischenräume zwischen Zeilen und Spalten festgelegt.

Hier das komplette Beispiel

See the Pen Grid Example by Florian Strohmaier (@flourish86) on CodePen.

Komplexere Layouts mit Grid

Das obige Beispiel ist relativ einfach und dient dem Verständnis. Daher wollen wir im folgenden ein Beispiel bauen, das etwas komplexer ist. Wir nehmen ein Beispiel für ein klassisches Web App Layout. Dabei gibt es einen Header und einen Footer, die am oberen und unteren Bildschirmrand die gesamte Breite einnehmen. Den Hauptbereich füllen eine Sidebar mit fixer Breite und ein zweispaltiger Content-Bereich.

Als Ausgangspunkt haben wir folgendes Markup.

Wir konfigurieren im CSS hierfür zunächst unsere Layout-Vorlage mit grid-template-rows und grid-template-coloumns.

Zusätzlich definieren wir mit dem Attribut grid-template-areas noch unsere entsprechenden Bereiche vor. Nun weisen wir die einzelnen Zellen den Bereichen zu.

Ein Sonderfall ist hier noch der zweispaltige Main-Bereich. Hierfür nutzen wir Sub-Grids, also ein weiteres Grid, das im Hauptgrid verschachtelt ist. Es muss lediglich display: subgrid für den Main-Bereich gesetzt werden.

Hier das komplette Beispiel:

See the Pen Grid Example 2 by Florian Strohmaier (@flourish86) on CodePen.

Fazit: Was bringt’s?

CSS-Grid ist ziemlich mächtig, wenn es um die Erstellung von komplexen Layouts geht. Der Vorteil ist dabei, dass all die Möglichkeiten, die Grid mit sich bringt (fast) komplett unabhängig vom Markup sind. Während man bei float-Layouts viele Verschachtelungs-divs einbauen musste, kann Grid komplett ohne auskommen.

Das kann zum Einen das Markup deutlich entschlacken, zum anderen lassen sich dadurch viel reponsivere Layouts bauen, da die Reihenfolge der Elemente komplett unabhängig vom Markup ist.

Weitere Infos

https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-template-columns-rows

https://caniuse.com/#feat=css-grid/

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/

Florian Strohmaier

Autor: Florian Strohmaier

Mit seinen Spezialgebieten UI-Konzeption, Prototyping und Frontendentwicklung unterstützt Florian das Dev-Team bei NETWAYS. Trotz seines Design-Backgrounds fühlt er sich auch in der Technik zuhause. Gerade die Kombination aus beidem hat für ihn einen besonderen Reiz.