Das Grid-Layout aus CSS3 kommt einer Revolution bei der Erstellung CSS-basierter Layouts gleich. Früher musste man tricksen, um Layouts zu gestalten – jetzt geht es endlich intuitiv. Gleichzeitig ist das Grid-Layout äußerst mächtig. Und das Gute: Grid-Layout wird in den aktuellen Versionen aller großen Browser unterstützt.

Auch im Jahr 2017 werden die meisten Weblayouts noch immer mit Techniken umgesetzt, die ursprünglich gar nicht für Layouts gedacht waren und auch nur bedingt dafür geeignet sind. Dazu gehören zum Beispiel float, display: inline-block, display: table-cell und Co. Einzelne Komponenten von CSS3 wie abgerundete Ecken, Schatten, Farbverläufe oder Transitions haben es längst in Weblayouts und in unseren Workflow geschafft, aber layouttechnisch sind wir in den letzten zehn Jahren nicht viel weiter gekommen. Glücklicherweise ändert sich das – zum einen durch Flexbox, das immer weiter adaptiert wird, und jetzt neuerdings durch CSS Grid (offiziell: „CSS Grid Layout Module Level 1“).

Im folgenden Artikel sehen Sie anhand eines Beispiels zunächst, wie CSS Grid funktioniert, danach geht es um die Unterschiede zu Flexbox. Am Ende dieses Artikels widmen wir uns dem Thema Browserunterstützung und Fallbacklösungen.

Wunschlos glücklich mit CSS Grid

CSS Grid ist eine Spezifikation des W3C zur Erstellung von Layouts [1]. Seit Mai 2017 ist CSS Grid eine „Candidate Recommendation“, d. h. nur eine Stufe von der endgültigen Verabschiedung entfernt. CSS Grid ermöglicht genau das, was der Name verheißt: die Erstellung und Definition von Rastern für Webseiten. Sie können sowohl einfache zwei- oder dreispaltige Raster definieren als auch ausgefeilte 16-spaltige Raster. Das Aussehen und die Anzahl der Zeilen lässt sich ebenfalls festlegen; allerdings können Sie auch auf das implizite Raster setzen, wodurch die benötigten Zeilen automatisch erstellt werden. Außerdem lassen sich Abstände zwischen den Rasterzellen definieren und die HTML-Elemente beliebig auf dem Raster verteilen. Einzelne Elemente können sich dabei über mehrere Spalten oder Zeilen erstrecken; Rasterzellen können aber auch frei bleiben, was ganz neue Layouttypen ermöglicht.

Auch in puncto Ausrichtung bietet CSS Grid alles, was das Herz begehrt: Mit einer Handvoll Eigenschaften können Sie Ihre Elemente beliebig vertikal und horizontal ausrichten. Die Ausmaße des Rasters können Sie sehr flexibel bestimmen, d. h. beispielsweise Spalten in fester Breite mit flexiblen Spalten kombinieren, die den übrigen Platz optimal unter sich aufteilen. Zudem sind mit der Funktion minmax() auch Ausmaßdefinitionen möglich wie „mindestens 200 px, aber höchstens 50 %“. CSS Grid bietet Ihnen viele Optionen zur Rasterdefinition, die gleichzeitig so flexibel sind, wie es für heutige Webseiten benötigt wird. Dabei können Sie auch auf sehr intuitive Techniken zurückgreifen. Und selbstverständlich lassen sich für unterschiedliche Viewports verschiedene Raster definieren.

Am Anfang ist das Raster

Anhand eines Beispiels lässt sich die prinzipielle Funktionsweise von CSS Grid am besten verdeutlichen. Es soll ein Raster mit drei Spalten und zwei Zeilen erstellt werden. Basis ist der folgende HTML-Code:

<div class="raster">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
  <div class="d">D</div>
</div>

Die Rasterdarstellung müssen wir beim Elternelement, d. h. dem umfassenden Element, aktivieren. Dazu dient display: grid. Genauso wie übrigens auch Flexbox wirkt Grid-Layout nur auf die direkten Kindelemente.

Dann geht es an die Erstellung des Rasters. Bei der Definition der Spalten hilft uns die Eigenschaft grid-template-columns:

grid-template-columns: 200px 250px 150px;

Diese Angabe definiert – aufgrund der drei Zahlen, die als Wert angegeben sind – drei Spalten. Gleichzeitig wird auch die Breite der Spalten festgelegt: Die erste ist 200 px breit, die zweite 250 px und die dritte 150 px. Auf dieselbe Art definieren wir zwei Zeilen:

grid-template-rows: 200px 200px;

Praktisch ist ebenfalls die Eigenschaft grid-gap, wenn wir einen Zwischenraum zwischen den Rasterzeilen und -spalten festlegen wollen. Damit sieht unsere Rasterdefinition folgendermaßen aus:

.raster {
  display: grid;
  grid-template-columns: 200px 250px 150px;
  grid-template-rows: 200px 200px;
  grid-gap: 20px;
}

Im Beispiel haben wir nur das Raster festgelegt, aber nicht bestimmt, an welcher Stelle die einzelnen Rasterelemente stehen sollen. In diesem Fall verteilen sich die Rasterelemente automatisch auf die einzelnen Rasterzellen in der Reihenfolge, in der sie im Quellcode stehen (Abb. 1).

Gut platziert …

Sie können auch für jedes Element einzeln die Position bestimmen. Dafür verwenden Sie grid-column-start, grid-column-end oder entsprechend grid-row-start und grid-row-end. Dahinter schreiben Sie eine Zahl – nämlich die Zahl der Rasterlinie, bei der das Element beginnen oder enden soll. Rasterlinien sind ein zentrales Konzept bei Grid-Layout. Eben haben wir davon gesprochen, dass wir über grid-template-columns Spalten definiert haben. Durch die Definition

grid-template-columns: 200px 250px 150px;

werden aber gleichzeitig Linien definiert. Die erste vertikale Rasterlinie wird automatisch an Position 0 festgelegt. Die zweite vertikale Linie beginnt 200 px weiter rechts, dann folgt die dritte Linie 250 px von der zweiten entfernt und schließlich die vierte, die 150 px nach der dritten beginnt.

Sehen wir uns das am Beispiel an – Ziel ist die in Abbildung 2 gezeigte Anordnung. Dafür muss das Element .a ganz links beginnen und sich über zwei Zellen erstrecken. Das bedeutet, dass .a bei der ersten vertikalen Rasterzeile beginnen muss und bis zur dritten vertikalen Rasterzeile reicht:

.a {
  grid-column-start: 1;
  grid-column-end: 3;
}

Außerdem soll .a bei der ersten horizontalen Rasterlinie anfangen. Standardmäßig erstrecken sich Elemente nur bis zur nächsten Rasterlinie, deswegen brauchen wir in diesem Fall grid-row-end nicht. Damit ist die Definition für .a vollständig:

.a {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
}

So wie sich .a über mehrere Spalten erstreckt, kann sich ein Element auch ü...