Einführung in CSS Grid

CSS Grid ist ein Layout-System in CSS, mit dem du Elemente in einem Raster aus Zeilen und Spalten anordnen kannst. Du definierst ein Gitter auf dem Container – die direkten Kindelemente werden dann automatisch in dieses Raster eingefügt.

Was ist ein CSS Grid Layout?

Ein CSS Grid Layout besteht immer aus zwei Teilen:

Grid Container – das Eltern-Element, auf dem du display: grid setzt
Grid Items – die direkten Kindelemente im Container, die in die Rasterzellen platziert werden

Grid ist ein zweidimensionales Layout-System. Das bedeutet: Du steuerst Zeilen und Spalten gleichzeitig. Damit eignet es sich besonders für komplette Seitenlayouts, Dashboards oder komplexe Bereiche mit mehreren Inhalten nebeneinander und untereinander.

Ein einfaches Beispiel sieht so aus:

HTML – Grid Container mit vier Elementen

1<div class="container">
2    <div>1</div>
3    <div>2</div>
4    <div>3</div>
5    <div>4</div>
6</div>

CSS – Einfaches 2-Spalten-Grid

1.container {
2    display: grid;
3    grid-template-columns: 1fr 1fr;
4}

Ausgabe

Mit grid-template-columns: 1fr 1fr entstehen zwei gleich breite Spalten. Die vier Kindelemente werden automatisch von links nach rechts und von oben nach unten platziert.

Einsatzgebiete von CSS Grid

CSS Grid eignet sich ideal für komplexe Seitenlayouts wie Dashboards, Galerien, Formulare oder Magazine, da Elemente präzise in Zeilen und Spalten angeordnet werden können. Durch Responsive Grids passen sich diese Layouts automatisch an verschiedene Bildschirmgrößen an.

Grid oder Flexbox?

Grid und Flexbox ergänzen sich. Eine einfache Faustregel:

Flexbox – wenn du Elemente in einer Richtung anordnest (eine Zeile oder eine Spalte)
CSS Grid – wenn du Zeilen und Spalten gleichzeitig planst und das gesamte Layout strukturierst

In der Praxis kombinieren viele Webseiten beides: Grid für das große Seitenlayout, Flexbox für kleinere Bereiche wie Navigation oder Buttons.

Im nächsten Kapitel lernst du: Grid Layout Container