CSS Grid-Layout

Was ist das Grid-Layout?

Das CSS Grid ist ein Layoutsystem, mit dem sich Elemente in Zeilen und Spalten anordnen lassen. Es eignet sich besonders für den Gesamtaufbau einer Seite. Mit wenigen CSS-Zeilen lassen sich komplexe Layouts realisieren.

Ein Grid wird aktiviert, indem man einem Element display: grid zuweist. Dieses Element wird zum Grid-Container, seine direkten Kinder werden zu Grid-Items.

Beispiel 1: Drei gleich breite Spalten

Mit grid-template-columns: 1fr 1fr 1fr werden drei gleich breite Spalten erstellt. fr steht für „fraction" (Anteil).

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

Beispiel 2: Unterschiedliche Spaltenbreiten

Spalten können unterschiedlich breit sein. Hier ist die zweite Spalte doppelt so breit wie die erste.

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 8px;
}

Beispiel 3: Element über mehrere Spalten

Mit grid-column: 1 / -1 kann ein Element alle Spalten überspannen — nützlich z.B. für einen Header oder Footer.

.header, .footer {
  grid-column: 1 / -1;
}