CSS Grid
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.
✨ Frag Lara — deine KI-Lernpartnerin
Entsperre personalisierte Lernunterstützung. Lara kann Lektionen erklären, Themen zusammenfassen und deine Lernfragen beantworten — verfügbar ab dem Go-Tarif.
Lara hilft dir, schneller zu lernen — exklusiv für ReadyTools Go-, Plus- und Max-Mitglieder.
