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.

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;
}

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.

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