Grid: Spalten, Zeilen, Bereiche

Baue Galerien und komplette Seitenlayouts mit den Spalten, Zeilen und benannten Bereichen von CSS Grid.

9 Min. · 3 Fragen

Flexbox richtet entlang einer Achse aus; Grid kontrolliert beide auf einmal. Sobald dein Entwurf wie eine Tabelle aussieht - Fotogalerie, Dashboard, ganze Seite mit Kopfzeile, Seitenleiste und Fußzeile -, ist Grid das richtige Werkzeug. Der Container definiert die Struktur in Spalten und Zeilen, und die Kinder platzieren sich automatisch oder genau dort, wo du es wählst.

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

Die Einheit fr (Fraction) teilt den verfügbaren Platz auf: 1fr 2fr erzeugt zwei Spalten, bei denen die zweite doppelt so breit ist. Anders als Prozentwerte berücksichtigt fr den gap, ohne dass du rechnen musst. Um ein Element hervorzuheben, lass es mit grid-column und grid-row über mehrere Tracks reichen.

.featured {
  grid-column: span 2;
  grid-row: span 2;
}

Für eine ganze Seite lässt dich grid-template-areas den Entwurf direkt im CSS zeichnen. Jede Zeichenkette steht für eine Zeile des Grids, jedes Wort für einen benannten Bereich. Ein Kind platziert sich dann mit grid-area. Das Ergebnis liest sich wie der Bauplan eines Architekten: Es ist die lesbarste Methode für ein Seitenlayout.

.page {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  min-height: 100vh;
}

.site-header { grid-area: header; }
.site-nav { grid-area: sidebar; }
.site-main { grid-area: main; }
.site-footer { grid-area: footer; }

Wissenscheck

Stelle sicher, dass du die wichtigsten Punkte dieser Lektion behalten hast.

1. Was stellt die Einheit fr in grid-template-columns: 1fr 2fr dar?
   • Einen Bruchteil des verfügbaren Platzes im Container
   • Einen Prozentsatz der Bildschirmbreite
   • Eine feste Größe in Pixeln
2. Welche Deklaration erzeugt drei Spalten gleicher Breite?
   • grid-template-columns: 3
   • grid-template-columns: repeat(3, 1fr)
   • grid-columns: 1fr 3
3. Wofür wird grid-template-areas verwendet?
   • Grid-Bereiche zu benennen, in denen sich Kinder über grid-area platzieren
   • Die Größe der Grid-Spalten zu definieren
   • Animationen zwischen Zellen zu erstellen