CSS Grid - Grundlagen

Grid: ein zweidimensionales Raster

Flexbox ordnet Kinder entlang einer Achse an. CSS Grid legt ein echtes Gitternetz aus Zeilen und Spalten über ein Element:

.page {
  display: grid;
}

Hinweis

Das ist der zentrale Unterschied zu Flexbox: Flexbox ist eindimensional (eine Zeile ODER eine Spalte), Grid ist zweidimensional (Zeilen UND Spalten gleichzeitig). Mehr dazu im Abschnitt “Flexbox vs. Grid”.

Das Grid definieren: Spalten und Zeilen

.page {
  display: grid;
  grid-template-columns: 270px 1fr 1fr;
  grid-template-rows: 60px auto 100px;
}

• grid-template-columns legt fest, wie breit jede Spalte ist - hier drei Spalten
• grid-template-rows legt fest, wie hoch jede Zeile ist - hier drei Zeilen
• Die direkten Kinder von .page werden automatisch der Reihe nach in die Zellen dieses Rasters einsortiert

Die neue Maßeinheit fr

.page {
  display: grid;
  grid-template-columns: 270px 5fr 3fr;
}

fr steht für fraction (Bruchteil). Zuerst werden die absoluten Angaben (hier 270px) von der Gesamtbreite abgezogen. Der restliche Platz wird dann im Verhältnis der fr-Werte verteilt:

• Verfügbare Breite: 1280px
• Minus feste erste Spalte: 1280px - 270px = 1010px
• Verteilung im Verhältnis 5 zu 3 auf Spalte zwei und drei:
  • Spalte 2: 5 × (1010px / 8) ≈ 631px
  • Spalte 3: 3 × (1010px / 8) ≈ 379px

Tipp

fr ersetzt in den meisten Fällen die Prozentangaben, die früher für Spaltenbreiten verwendet wurden - und rechnet dabei automatisch mit fixen Spalten daneben, ohne dass ihr selbst subtrahieren müsst.

Abstand zwischen Zellen: gap

Genau wie bei Flexbox:

.page {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

Spalten wiederholen: repeat()

Für viele gleich breite Spalten müsst ihr sie nicht einzeln auflisten:

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* = 1fr 1fr 1fr */
  gap: 12px;
}

Automatisch so viele Spalten wie reinpassen

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

auto-fill erzeugt automatisch so viele Spalten wie Platz vorhanden ist, jede mindestens 200px, aber höchstens 1fr breit. Eine Bildergalerie, die sich ganz ohne Media Query an jede Bildschirmbreite anpasst!