css mit Adi Prinz

CSS Grid aktivieren

Mit display: grid; wird ein Element zum Grid-Container. Seine direkten Kindelemente werden automatisch zu Grid-Items.

.wrapper {
  display: grid;
}

Mit grid-template-columns und grid-template-rows werden Spalten und Zeilen definiert. gap legt die Abstände zwischen den Tracks fest.

.wrapper {
  display: grid;
  grid-template-columns: 120px 1fr 80px;
  grid-template-rows: 50px 120px 80px;
  gap: 10px;
}

Basis-HTML und Basis-CSS der Beispiele

Alle Beispiele verwenden denselben Grid-Container und dieselben Grid-Items. Das gemeinsame Basis-CSS steht unter #wrapper. Nur die Klassen .wrapper1, .wrapper2 usw. enthalten die Grid-Eigenschaften, die sich im jeweiligen Beispiel ändern.

Basis-CSS

#wrapper {
  display: grid;
  max-width: 800px;
  margin: 20px 0;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #fcfcfc;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

#wrapper .item {
  padding: 7px 20px;
  border-radius: 5px;
  background-color: #444;
  color: #fff;
  font-size: 1.2em;
}

#wrapper .item:nth-child(even) {
  background-color: #ccc;
  color: #000;
}

/* Hier stehen nur die Grid-Eigenschaften des Beispiels. */
.wrapper1 {
}

Basis-HTML

<div id="wrapper" class="wrapper1">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

Grid-Line

Grid-Lines sind die horizontalen und vertikalen Begrenzungslinien des Rasters. Sie werden nummeriert und später für die Platzierung von Grid-Items verwendet.

Grid-Track

Ein Grid-Track ist der Bereich zwischen zwei benachbarten Grid-Lines. Ein Track entspricht einer vollständigen Spalte oder Zeile.

Grid-Cell

Eine Grid-Cell ist die kleinste Einheit des Rasters. Sie entsteht am Schnittpunkt einer Zeile und einer Spalte.

Grid-Area

Eine Grid-Area ist ein rechteckiger Bereich, der von vier Grid-Lines begrenzt wird. Sie kann aus einer oder mehreren Grid-Cells bestehen.

Explizites Grid

Im folgenden Beispiel werden drei Spalten und drei Zeilen ausdrücklich definiert. Die neun Grid-Items füllen dieses Raster automatisch.

Beispiel-CSS

.wrapper1 {
  grid-template-columns: 120px 1fr 80px;
  grid-template-rows: 50px 120px 80px;
  gap: 10px;
}

Beispiel-HTML

<div id="wrapper" class="wrapper1">
  <div class="item">1</div>
  <!-- Weitere 8 Items -->
</div>

Beispiel-Ausgabe

Implizites Grid

Die drei Spalten werden explizit definiert. Die benötigten Zeilen entstehen automatisch und erhalten durch grid-auto-rows jeweils eine Höhe von 50px.

Beispiel-CSS

.wrapper2 {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 50px;
  gap: 10px;
}

Beispiel-HTML

<div id="wrapper" class="wrapper2">
  <div class="item">1</div>
  <!-- Weitere 8 Items -->
</div>

Beispiel-Ausgabe

Grid-Container: Eigenschaften

grid-template: Kurzschreibweise

grid-template fasst die expliziten Grid-Eigenschaften zusammen. Vor dem Schrägstrich stehen die Zeilen, danach die Spalten.

.wrapper3 {
  grid-template: 80px 120px / 20% 1fr 20%;
  gap: 10px;
}

grid: Kurzschreibweise

grid kann sowohl explizite als auch implizite Grid-Eigenschaften zusammenfassen. Die Kurzschreibweise ist kompakt, aber für Anfänger meist schwerer zu lesen.

.wrapper4 {
  grid: 60px 80px 80px / repeat(3, 1fr);
  gap: 10px;
}

Übersicht

Beispiel mit repeat() und minmax()

Das folgende Grid erzeugt automatisch so viele Spalten, wie in den verfügbaren Platz passen. Jede Spalte ist mindestens 200px breit und kann den restlichen Platz gleichmäßig nutzen.

.wrapper5 {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

Beispiel-Ausgabe

Grid-Item: Eigenschaften

Hinweis: Mit order lässt sich die visuelle Reihenfolge verändern. Die Reihenfolge im HTML bleibt jedoch unverändert. Für Tastaturbedienung und Screenreader sollte deshalb weiterhin eine sinnvolle Dokumentreihenfolge verwendet werden.