CSS Grid Tutorial – Teil 3: beliebige Anzahl Zeilen

CSS Grid Tutorial – Teil 3: beliebige Anzahl Zeilen

Tutorial CSS Grid – Teil 3

Der erste Teil dieses visuellen Tutorials deckte die Grundlagen von CSS Grid ab. Das zweite Tutorial zeigte, wie Breiten und Höhen mehrerer Spalten, resp. Zeilen zusammen festgelegt werden. Diese Lektion erklärt, wie die Höhe beliebiger Zeilen festgelegt werden. Dies wird dann gebraucht, wenn die Inhalte aus einer Datenbank kommen und die Anzahl der Zeilen nicht bekannt ist.

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. Die Details sind im zweiten Tutorial.
  • 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 Zeilenhöhen automatisch festgelegt?

In CSS Grid steht dafür ein spezieller Befehl zur Verfügung:

CSS Grid minmax Befehl

Der Befehl sagt aus, dass die Höhe aller Zeilen automatisch in Abhängigkeit des Inhalts (auto) festgelegt wird. Die minimale Zeilenhöhe beträgt im Beispiel 10px (min = 150px; max = automatisch, in Abhängigkeit des Inhalts): minmax(100px, auto). Darstellung im Browser:

Wenn bekannt ist, dass alle Zeilen immer gleich hoch sind (zum Beispiel 150px), kann auch grid-auto-rows: 150px verwendet werden.

Frage 3: wie werden die Spaltenbreiten automatisch festgelegt?

Es besteht die Möglichkeit, in einen gegebenen Container eine beliebige Anzahl Spalten mit einer fixen Breite (z.B. 100px) zu füllen. Dies ist mit dem Befehl grid-template-columns: repeat(auto-fill, 100px) möglich. Je nach Breite des Containers werden mehr oder weniger Spalten mit je 100px Breite eingefüllt: