Einführung in CSS Grid: Der Grid-Container

Ein Raster mit CSS Grid besteht grob gesagt aus einem Container und den darin enthaltenen Grid-Elementen. In diesem Artikel geht es um das CSS für den Container.

Angenommen, wir haben dieses HTML

<div class="grid-container">
 <div class="grid-element">Eins</div>
 <div class="grid-element">Zwei</div>
 <div class="grid-element">Drei</div>
</div>

Ohne weitere Anweisungen werden die Grid-Elemente einfach untereinander platziert und man sieht nicht viel.

See the Pen CSS Grid Demo 1 by Kirsten (@netzialist) on CodePen.light

Spalten definieren mit grid-template-columns

Mit den folgenden drei Zeilen CSS wird aus dem Container ein Grid-Container.
display:grid initiiert den Grid und mit grid-template-columns bauen wir die Spalten des Rasters. grid-gap sorgt für die Abstände.

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

See the Pen CSS-Grid Demo 2 by Kirsten (@netzialist) on CodePen.light

Die Einheit fr bedeutet Fraction, das ist der zur Verfügung stehende freie Platz im Grid. grid-template-columns: 1fr 1fr 1fr;bedeutet, dass der zur Verfügung stehende freie Platz in 3 gleiche Teile geteilt wird.

Man kann auch andere Einheiten anstatt fr verwenden, px, em, rem oder %. Man kann die Einheiten miteinander mischen.

grid-template-columns: 200px 200px 200px;
grid-template-columns: 25% auto 200px;

Alternative Schreibweise für grid-template-columns

Den oben gezeigten dreispaltigen Raster kann man auch anders schreiben, indem man die repeat-Anweisung einsetzt. Bei Grids mit vielen Elementen wird der Code dadurch übersichtlicher. Das Ergebnis ist bei beiden Schreibweise derselbe dreispaltige Raster.

grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: repeat (3, 1fr);

Reihen hinzufügen mit grid-template-rows

Bisher haben wir nur die Dimensionen der Spalten (columns) definiert. Für viele Fälle ist das vollkommen ausreichend.

Mit der Eigenschaft grid-template-rows kann man auch Angaben für Reihen (rows) definieren. Das würde man beispielsweise dann machen, wenn die Reihen unterschiedliche Höhen haben sollen.

See the Pen CSS-Grid Demo 3 by Kirsten (@netzialist) on CodePen.light

Im nächsten Artikel in dieser Reihe geht es um die Platzierung der Grid-Elemente innerhalb des Containers: Einführung in CSS Grid: Die Elemente im Grid-Container