CSS Grid Tutorial – Teil 2: Zeilen und Spalten

CSS Grid Tutorial – Teil 2: Zeilen und Spalten

Tutorial CSS Grid – Teil 2

Der erste Teil dieses visuellen Tutorials deckte die Grundlagen von CSS Grid ab. Diese Lektion zeigt, wie Breiten und Höhen mehrerer Spalten, resp. Zeilen zusammen festgelegt werden.

Inhalt

Frage 1: wie wird das Spalten- und Zeilenraster definiert?

Es gibt eine Menge von Möglichkeiten, das Raster festzulegen:

  • Grundsätzlich lässt sich von jeder Spalte, resp. jeder Zeile die Breite, resp. Höhe in absoluten (zum Beispiel px) oder relativen (z.B. %, vw, vh, fr etc.) Einheiten definieren. Die Details finden sich im ersten Tutorial.
  • Es besteht auch die Möglichkeit, die Breiten mehrerer Spalten, resp. Zeilen zusammen festzulegen, siehe Beispiel
  • Als letzte Option kann die Höhe beliebiger Zeilen, resp. Spalten festgelegt werden. Dies wird dann gebraucht, wenn die Inhalte aus einer Datenbank kommen und die Anzahl der Zeilen nicht bekannt ist.

Frage 2: wie werden die Breiten mehrerer Spalten gemeinsam festgelegt?

Als Beispiel sollen in einem vierspaltigen Layout die ersten beiden Spalten je eine und die beiden nachfolgenden Spalten je zwei Einheiten breit werden. Eine Möglichkeit wäre, die Breiten einzeln festzulegen:

CSS Grid, Zeilen und Spalten

Bei anspruchsvolleren Layouts kann dies schnell umständlich werden. Eine Vereinfachung ist mit dem repeat Befehl möglich:

CSS Grid, repeat Befehl

Die ersten zwei Spalten sind je eine, die folgenden zwei Spalten je zwei Einheiten breit. Die Befehle lassen sich beliebig kombinieren, resp. ergänzen:

CSS Grid, zwei repeat Befehle

Spalten eins und zwei sind eine, Spalten drei und vier zwei und Spalte 5 drei Einheiten breit. Ein 12-spaltiges Raster würde mit dem Befehl
grid-template-columns: repeat(12, 1fr) festgelegt werden.

Frage 3: wie werden die Höhen mehrerer Zeilen gemeinsam festgelegt?

Analog der Breitenverteilung lassen sich mit dem repeat Befehl die Höhen der Zeilen festlegen:

Das fertig gestaltete Layout:

Zusammenfassung

Mit Hilfe des repeat Befehls lassen sich Spaltenbreiten und Zeilenhöhen effizient darstellen. Als Einheiten können absolute (zum Beispiel px) oder relative (z.B. %, vw, vh, fr etc.) Werte verwendet werden.

Fortsetzung

Teil 3 des Tutorials