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
- Wie wird das Spalten- und Zeilenraster definiert?
- Wie werden die Breiten mehrerer Spalten gemeinsam festgelegt?
- Wie werden die Höhen mehrerer Zeilen gemeinsam festgelegt?
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:
Bei anspruchsvolleren Layouts kann dies schnell umständlich werden. Eine Vereinfachung ist mit dem repeat Befehl möglich:
Die ersten zwei Spalten sind je eine, die folgenden zwei Spalten je zwei Einheiten breit. Die Befehle lassen sich beliebig kombinieren, resp. ergänzen:
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.