CSS Grid

CSS Flexbox-Ausrichtung CSS Grid-Layouts

CSS Grid ist ein leistungsstarkes Layout-System, das die Arbeit mit zweidimensionalen Rastern ermöglicht und eine präzisere und flexiblere Anordnung von Elementen erlaubt.

Grundlagen des Grids

Mit Grid lassen sich Spalten und Zeilen erstellen und Elemente in diese Zellen platzieren. Die Grundeinstellungen erfolgen über grid-template-columns, grid-template-rows und gap.

Eigenschaft	Beschreibung
display: grid	Aktiviert das Grid-Layout für das ausgewählte Element.
grid-template-columns	Bestimmt die Anzahl und Größe der Spalten.
grid-template-rows	Bestimmt die Anzahl und Größe der Zeilen.
gap	Legt den Abstand zwischen Spalten und Zeilen fest.

Praktisches Beispiel

Im folgenden Beispiel erstellen wir ein Grid mit drei Spalten, in dem sich die Elemente automatisch an die Zellen anpassen.

Mit grid-template-columns: 1fr 1fr 1fr erstellen wir drei gleich große Spalten, und mit gap fügen wir Abstände zwischen den Elementen hinzu.

Grid Areas und benannte Bereiche

Mit der Eigenschaft grid-template-areas können wir den einzelnen Bereichen im Raster Namen geben. Das macht das Layout lesbarer und besser wartbar.

Im folgenden Beispiel sind Header, Hauptinhalt und Footer als separate Grid-Bereiche definiert.

Responsive Grids mit repeat() und auto-fit/auto-fill

Die Kombination von repeat(), auto-fit und auto-fill füllt den verfügbaren Platz dynamisch, sodass das Grid automatisch auf die Bildschirmgröße reagiert.

Im folgenden Beispiel passen sich die Grid-Spalten automatisch an die Bildschirmgröße an.

Tipps zur Verwendung von Grid

Der große Vorteil von Grid ist die einfache Handhabung komplexer Layouts. Die Größe von Zeilen und Spalten kann dynamisch angepasst werden, was es ideal für responsive Layouts macht.

Verwende fr (fractional unit), um Spalten und Zeilen flexibel zu skalieren.
Mit grid-template-areas kannst du den Code lesbarer und besser wartbar machen.
Die Kombination von Grid und Flexbox ermöglicht noch flexiblere und kreativere Layouts.