Grid-Grundlagen

Standardmäßig enthalten Raster nur eine Spalte. Wenn wir Elemente hinzufügen würden, würde jedes Element in eine neue Zeile eingefügt werden. Das ist kein großes Raster! Um dies zu ändern, müssen wir die Anzahl der Zeilen und Spalten in unserem Raster explizit definieren.

Wir können die Spalten unseres Rasters mithilfe der CSS-Eigenschaft grid-template-columns definieren.

Unten sehen wir ein Beispiel für diese Eigenschaft:

Diese Eigenschaft führt zu zwei Änderungen. Erstens definiert sie die Anzahl der Spalten im Raster; in diesem Fall sind es zwei. Zweitens legt sie die Breite jeder Spalte fest. Die erste Spalte ist 100 Pixel breit und die zweite Spalte 200 Pixel.

Wir können die Größe unserer Spalten auch als Prozentsatz der gesamten Rasterbreite definieren.

In diesem Beispiel ist das Raster 1000 Pixel breit. Daher ist die erste Spalte 200 Pixel breit, da sie auf 20% der Rasterbreite eingestellt ist. Die zweite Spalte ist 500 Pixel breit.

Wir können diese beiden Einheiten auch mischen und anpassen. Im folgenden Beispiel gibt es drei Spalten mit einer Breite von 20 Pixeln, 40 Prozent und 60 Pixeln:

Wir haben gelernt, wie wir die Anzahl der Spalten in unserem Raster explizit definieren. Um die Anzahl und Größe der Zeilen anzugeben verwenden wir die Eigenschaft grid-template-rows.

Diese Eigenschaft ist fast identisch mit grid-template-columns. Sehen wir uns den Code unten an um beide Eigenschaften in Action zu sehen.

Die Abkürzungs Eigenschaft grid-template kann die beiden vorherigen CSS-Eigenschaften ersetzen. Sowohl grid-template-rows als auch grid-template-columns sind im folgenden Code nirgends zu finden!

Möglicherweise sind wir bereits mit mehreren Typen responsiver Einheiten vertraut, beispielsweise Prozentsätze (%), Ems und Rems. 

CSS Grid hat eine neue relative Größeneinheit eingeführt - fr, wie Fraktion.

Mithilfe der Einheit fr können wir die Größe von Spalten und Zeilen als Bruchteil der Länge und Breite des Rasters definieren. Diese Einheit wurde speziell für die Verwendung in CSS Grid erstellt. Durch die Verwendung von fr lässt sich leichter verhindern, dass Rasterelemente über die Grenzen des Rasters hinausragen. Betrachten wir den folgenden Code:

In diesem Beispiel besteht der Raster aus drei Zeilen und drei Spalten. Die Zeilen teilen die verfügbaren 400 Pixel Höhe in vier Teile auf. Die erste Zeile erhält zwei dieser Teile, die zweite Zeile einen und die dritte Zeile einen. Daher ist die erste Zeile 200 Pixel hoch und die zweite und dritte Zeile sind 100 Pixel hoch.

Die Breite jeder Spalte ist ein Bruchteil des verfügbaren Platzes. In diesem Fall wird der verfügbare Platz in fünf Teile aufgeteilt. Die erste Spalte erhält ein Fünftel des Platzes, die zweite Spalte drei Fünftel und die letze Spalte ein Fünftel. Da die Gesamtbreite 1000 Pixel beträgt, bedeutet dies, dass die Spalten jeweils Breiten von 200 Pixel, 600 Pixel und 200 Pixel haben.

Es ist möglich, fr auch mit anderen Einheiten zu verwenden. In diesem Fall stellt jedes fr einen Bruchteil des verfügbaren Platzes dar.

Die Eigenschaft, die die Anzahl der Zeilen und Spalten in einem Raster definieren, können eine Funktion als Wert annehmen. repeat() ist eine dieser Funktionen. Die Funktion repeat() wurde speziell für CSS Grid erstellt.

Die Wiederholungsfunktion dupliziert die Angaben für Zeilen oder Spalten eine bestimmte Anzahl von Malen. Im obigen Beispiel wird das Raster durch die Verwendung der Wiederholungsfunktion drei Spalten mit einer Breite von jeweils 100 Pixeln aufweisen. Dies entspricht der Eingabe von:

Repeat ist besonders nützlich bei fr. Beispielsweise würde repeat(5, 1fr) unsere Tabelle in fünf gleiche Zeilen oder Spalten aufteilen.

Schließlich kann der zweite Parameter von repeat() mehrere Werte haben.

Bisher hatten alle Raster, mit denen wir gearbeitet haben, eine feste Größe. Das Raster in unserem Beispiel war 400 Pixel breit und 500 Pixel hoch. Manchmal möchten wir jedoch möglicherweise, dass die Größe eines Rasters an die Größe unseres Webbrowsers angepasst wird.

In solchen Situationen möchten wir vielleicht verhindern, dass eine Zeile oder Spalte zu groß oder zu klein wird. Wenn wir beispielsweise ein 100 Pixel breites Bild in unserem Raster haben, möchten wir wahrscheinlich nicht, dass die Spalte dünner als 100 Pixel wird! Die Funktion minmax() kann uns helfen, dieses Problem zu lösen.

In allen unseren Rastern gab es bisher keinen Abstand zwischen den Elementen in unserem Raster. Die CSS-Eigenschaft row-gap und column-gap fügen zwischen jeder Zeile und Spalte im Raster einen Leerraum ein.