Grid Layout in CSS: Responsive Design 2.0

Worum geht´s?

In unserem CSS Tutorial zu Flexboxen und Media Queries haben wir bereits eine der wichtigsten Techniken für Responsive Design kennengelernt. Die CSS Flexbox ermöglicht es uns, Elemente so auf einer Hauptachse und Nebenachse anzuordnen, dass diese automatisch auf veränderte Bildschirm-Größen reagieren können. Für 2-dimensionale Layouts verschachteln wir dann einfach unsere CSS Flexboxen. Was aber, wenn wir diese Layout-Entscheidungen gleich in 2D festlegen wollen? Das bringt uns zum Grid Layout in CSS.

1. Was ist das Grid Layout in CSS? Wofür wird es verwendet?

Das Grid Layout in CSS unterteilt deine Website in eine Art Raster („grid“ bedeutet Raster, Gitter oder Netz).

Dieses Raster muss dabei nicht gleichmäßig verteilt sein. Reihen und Spalten können also durchaus auch größer oder kleiner als andere Reihen und Spalten sein.

Basierend auf diesem Gitternetz werden dann die einzelnen HTML-Elemente in das 2D-Raster eingesetzt.

Anstatt mit Hilfe von CSS Flexbox und den CSS Media Queries tief verschachtelte Layouts zu erstellen, können wir auch mit dem Grid Layout in CSS gleich ein zweidimensionales Layout erstellen.

Je nachdem wie komplex unser Layout aufgebaut ist, können wir dabei sogar weitgehend auf CSS Media Queries verzichten. Das Grid Layout in CSS übernimmt einige Anpassungen je nach Bildschirmgröße automatisch für uns.

2. Wie wir das Grid Layout in CSS einsetzen

Wie eingangs erwähnt, brauchen wir zur Erstellung eines Grid Layouts als allererstes das entsprechende Raster (grid).

Außerdem müssen wir dem Browser sagen, dass ein HTML-Element ein Grid Layout in CSS bekommen soll.

Damit beginnen wir erst mal:

2.1 Ein HTML-Element in ein Grid Layout umwandeln

Der erste Schritt ist sehr einfach, und ähnelt dem Vorgehen bei einer CSS Flexbox:

#div1 {
  display: grid;
  width: 100vw;
  height: 100vh;
  background-color: #eee;
}

Das #div1 wird mit „display: grid;“ zu einer Flexbox gemacht.

Damit wir sie auch gut sehen können, geben wir ihr gleich eine Breite, Höhe und Hintergrundfarbe.

2.2 Gleichmäßige Raster für das Grid Layout in CSS erstellen

Als nächstes braucht unser Grid Layout in CSS das namensgebende Raster.

Damit wir das sinnvoll sehen können, braucht unser #div1 noch einige weitere DIVs als Kind-Elemente. Geben wir unserem #div1 im HTML-Code einfach nochmal 12 DIV-Kinder:

<div id="div1">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

Außerdem geben wir den Kind-DIVs noch einen Rahmen, damit wir sie besser sehen können:

#div1 div {
  border: 1px solid purple;
}

Das Ergebnis sollte in etwa so aussehen:

Damit unser Grid Layout nun eine sinnvolle Rasterung bekommt, müssen wir diese einstellen.

Nehmen wir mal an, wir wollen ein 4×3 Layout:

#div1 {
  display: grid;
  width: 100vw;
  height: 100vh;
  background-color: #eee;
  grid-template-rows: repeat(4, 25%);
  grid-template-columns: repeat(3, 33%);
}

Das Ergebnis:

2.3 Ungleichmäßige Raster für das Grid Layout erstellen

Wollen wir, dass unsere Zeilen und Spalten im Raster nicht die gleichen Höhen und Breiten haben, können wir das auch tun:

#div1 {
  display: grid;
  width: 100vw;
  height: 100vh;
  background-color: #eee;
  grid-template-rows: [header] 100px [main] auto [footer] 200px;
  grid-template-columns: 1fr 100px 50% 1fr;
}

Das Ergebnis:

Die Einheit „fr“ bedeutet dabei „fraction“ (ein Teil), und bezieht sich auf den übrig gebliebenen Platz.

Wenn unser #div1 zum Beispiel insgesamt 1000px an Breite hat, dann teilt sich das Ganze so auf:

• 1. Spalte: 200px
• 2. Spalte: 100px
• 3. Spalte: 500px
• 4. Spalte: 200px

Die 1. und 4. Spalte erhalten deswegen jeweils 200px, weil 50% der ursprünglichen 1000px (=500px) an die 3. Spalte gehen. Vom Rest bekommt die 2. Spalte noch 100px ab. Was dann überbleibt, wird unter allen fr-Werte verteilt.

Wollen wir, dass die 4. Spalte mehr Platz erhält, können wir das ähnlich wie bei der CSS Flexbox mit Verhältnissen lösen, also z.B. bei der 1. Spalte „2fr“ und bei der 4. Spalte „1fr“ schreiben. Dann hat die 1. Spalte 2x so viel Platz wie die 4. Spalte.

Bei den Zeilen (rows) finden sich in den []-Klammern Bezeichnungen für die einzelnen Zeilen. Die []-Klammern mit den Bezeichnungen kann man optional hinzufügen.

Das „auto“ nützt den übrig gebliebenen Platz, und funktioniert daher ähnlich wie die „fr“-Einheit.

2.4 HTML-Elemente im Grid Layout platzieren

Nun da wir unser Raster für unser Grid Layout in CSS erstellt haben, können wir unsere einzelnen HTML-Elemente auf diesem Raster platzieren.

Den einfachsten Weg, nämlich direkt über das Raster, haben wir ja schon kennengelernt.

Was aber, wenn ein HTML-Element über mehrere Bereiche unseres Rasters gehen soll, also z.B. über die ganze erste Zeile? Oder ein anderes über die zweiten beiden Spalten der letzten Zeile?

Dafür müssen wir uns nun den Kind-Elementen unseres #div1 zuwenden. Wir geben zwei davon eine ID:

<div id="div1">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div id="div2"></div>
    <div></div>
    <div></div>
    <div id="div3"></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

Wenn unser #div2 nun über die gesamte erste Zeile gehen soll, können wir das so lösen:

#div2 {
  grid-area: 1 / 1 / 2 / -1;
  background-color: orange;
}

Der Befehl grid-area hat 4 Werte, in dieser Reihenfolge, getrennt durch einen Schrägstrich „/“:

• row-start
• column-start
• row-end
• column-end

Die Werte sind jeweils von-bis Werte. Die Werte für row-start und row-end sind in diesem Fall 1 und 2, das heißt vom Start der 1. Zeile bis zum Beginn der 2. Zeile. Die Werte für column-start und column-end sind 1 und -1, das bedeutet vom Start der 1. Spalte bis zum Ende (-1 ist jeweils die letzte Spalte/Zeile).

Nun platzieren wir noch unser #div3 über die mittleren beiden Spalten der letzten beiden Zeilen:

#div3 {
  grid-area: 3 / 2 / 5 / 4;
  background-color: red;
}

Das Ergebnis sieht dann in etwa so aus:

Wie dir vielleicht auffällt, hat unser Grid Layout nun plötzlich mehr als 4 Zeilen. Das ist passiert, weil unser rotes #div3 so riesig geworden ist.

Das Grid Layout in CSS verteilt die Elemente entsprechend ihres Platzbedarfes automatisch.

Statt der Zeilen/Spalten-Nummer ist es auch zulässig, den Namen einer Zeile/Spalte (wir erinnern uns an die [header], die eckigen Klammern []) statt der Zahl zu schreiben.

Außerdem kann man auch z.B. „span 3“ schreiben, was so viel bedeutet wie „bis zu den nächsten 3 Spalten/Zeilen“.

3. Unser Grid Layout und seine Kinder anordnen

Ähnlich wie bei unserer CSS Flexbox haben wir auch beim Grid Layout in CSS die Möglichkeit der Anordnung der Elemente. Dabei unterscheiden wir vier Möglichkeiten:

• justify-content
• align-content
• justify-items
• align-items

Die CSS-Befehle justify-content und align-content sorgen dabei dafür, dass das Raster unseres Grid Layouts sich gut im Eltern-Element verteilt.

Angenommen, das Eltern-Element ist 1000px breit und unser Grid Layout selbst ist nur 600px breit. Dann können wir mit justify-content bestimmen, wie sich unser Grid Layout im Eltern-Element verteilt (z.B. mit „start“, „end“, „center“, „space-between“, …)

Die CSS-Befehle justify-items und align-items hingegen sorgen dafür, wie sich die einzelnen Kind-Elemente innerhalb des Rasters verteilen.

Der Befehl „justify-items: center“ z.B. sagt dem Grid Layout, dass die Elemente sich jeweils in die Mitte des Raster-Teiles positionieren sollen, wobei ein „stretch“ statt „center“ hingegen zu einem völligen Ausfüllen der zur Verfügung stehenden Breite führen würde.

4. Ein Kärtchen-Layout mit Grid in CSS ohne Media Queries

Ein berühmter „Trick“ mit dem Grid Layout in CSS ist die automatische Anordnung von „Kärtchen“ je nachdem, wie viel Platz zur Verfügung steht. Hier ein üblichers Beispiel:

#div1 {
  display: grid;
  width: 100vw;
  height: 100vh;
  background-color: #eee;

  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}
#div1 div {
  border: 1px solid purple;
  background-color: orange;
}

Und das Ergebnis:

Der Trick dabei sind zwei Parameter für den CSS-Befehl grid-template-column:

• auto-fit und
• minmax()

Der Wert „auto-fit“ versucht so viele HTML-Elemente in den vorhandenen Platz einzufügen wie möglich (Alternative: „auto-fill“, so viele wie möglich „reinpacken“).

Die Funktion minmax() setzt Minimum- und Maximum-Werte für eine Breite bzw. Höhe.

Gemeinsam sorgen sie dafür, dass unsere Kärtchen bis zu einem gewissen Punkt wachsen/schrumpfen (mit minmax() gesetzt), und wenn das Ganze zu groß/klein wird, springt ein Element eine Zeile runter oder rauf – ganz ohne Media Queries!

Der Befehl „gap“ sorgt – ähnlich wie bei der CSS Flexbox – für den Abstand zwischen den einzelnen Elementen.

Theoretisch gibt es natürlich noch mehr CSS-Befehle zum Grid Layout in CSS. Aber das wären erstmal die wichtigsten für den Anfang.

5. CSS Flexbox oder Grid Layout in CSS?

Verschachtelte CSS Flexboxen oder Grid Layout in CSS – was ist nun besser?

Wie so oft ist die Antwort: Es kommt darauf an.

Willst du ein Kärtchen-Layout wie oben beschrieben realisieren, bietet dir das Grid Layout in CSS eine sehr einfache Möglichkeit dafür.

Willst du sehr komplexe Layouts machen, die alle aufeinander reagieren, hast du vielleicht mit der guten alten CSS Flexbox mehr Glück.

Je mehr CSS Flexboxen du verschachteln musst, um deine Layout-Vorstellungen zu erreichen, desto mehr HTML-Elemente brauchst du auch dafür. In dieser Hinsicht ist das Grid Layout in CSS der Flexbox überlegen.

Geht es nur um kleinere Anpassungen fürs Responsive Design, ist die CSS Flexbox bisweilen weniger umständlich.

Ist das allgemeine Layout der Website recht einfach gehalten (vielleicht auch weil der Mobile First Ansatz verfolgt wurde) und/oder handelt es sich weitgehend um ein Kärtchen-Layout, bietet sich das Grid Layout an.

Im Alltag wirst du wohl beide Techniken benutzen.

Viel Freude mit den Grid Layouts in CSS 🙂

Diskussion zum Tutorial