Ein Grid-Element ermöglicht es Spalten und Zeilen anzuordnen.
Ähnlich wie Tabellen, nur flexibler.
Wir geben einem Container ein „display:grid“. Dieser stellt nun das Raster dar.
Alle Kind-Elemente des Containers sind nun Grid-Items.

Wir arbeiten also mit Spalten und Zeilen (Reihen)

Wie viele Spalten und Reihen es gibt, kann man mit „columns“ Eigenschaft festlegen.

Legen wir drei Spalten fest, haben wir drei Spalten mit der jeweils angegebenen Breite.

Das Gleiche gilt für „grid template-rows“

Hiermit werden die Anzahl der Reihen und deren Größe festgelegt.

Mit der „auto-rows“ Eigenschaft wird die „default“ Größe festgelegt.

Manchmal sollen sich die Grids anpassen, z.B. bei Zellinhalten.
Dafür gibt es die MinMax-Methode

Die erste Größe ist die Mindestgröße und die Maximale ist „auto“.
Hier haben wir mit festen Einheiten (px) gearbeitet.

Besser geht das mit dynamischenWerten.
Die „neuere“ Einheit = fr = Fraction

Geben wir ein 1fr so versucht die Spalte den verfügbaren Browserplatz zu nutzen.
Bei 3 fr-Werten werden diese Spalten dynamisch verteilt.

Geben wir einer Spalte 2 fr ist sie doppelt so groß wie die Anderen.

Bekommt der grid-container eine feste Breite so wird Dieser in Grids eingeteilt.

Damit wir Platz (Abstand) zwischen den Grids bekommen können wir die row-gap und column-gap nutzen.