CSS Grid erzeugen: Spalten, Zeilen und benannte Bereiche

So verwenden Sie es

Tragen Sie die Spalten (Spurgrößen) und die Zeilen (Spurgrößen) ein. Bei zwei Spalten ergibt 200px 1fr eine feste Seitenleiste und einen flexiblen Hauptbereich.
Stellen Sie den Spaltenabstand (px) und den Zeilenabstand (px) ein und geben Sie dem Container einen Klassennamen.
Tippen Sie einen Namen unter Name des Bereichs zum Malen, lassen Sie Malen ausgewählt und klicken Sie auf die Zellen, die zu diesem Bereich gehören. Wählen Sie Radieren, um Zellen zu leeren.
Kopieren Sie das Feld CSS oder prüfen Sie die Vorschau, bevor Sie die Regeln in Ihr Stylesheet einfügen.

Spurgrößen und repeat()

Jede Spur ist eine Größe im Raster: eine Länge in px oder ein Prozentwert, eine flexible Größe in fr, die den übrigen Platz anteilig nach ihrer Zahl teilt, auto, min-content oder max-content. Ein minmax(Minimum, Maximum) gibt einer Spur einen Bereich. Die CSS-Spezifikation „Grid Layout“ (englisch) legt fest, wie jede davon bemessen wird.

repeat(3, 1fr) schreibt dieselbe Spur dreimal. repeat(auto-fill, minmax(200px, 1fr)) erzeugt so viele Spuren, wie in die Breite des Kastens passen. Weil diese Anzahl vom Kasten abhängt, braucht jede Spur in einer auto-fill- oder auto-fit-Wiederholung eine feste Größe. Der Rechner kann darüber keine benannten Bereiche malen.

grid-template-columns: 200px 1fr;  grid-template-rows: auto 1fr auto;  gap: row-gap column-gap;

Benannte Bereiche

Die Eigenschaft grid-template-areas nimmt für jede Zeile des Rasters eine Zeichenkette. Die Namen in einer Zeichenkette sind die Zellen dieser Zeile, und ein Punkt steht für eine Zelle, die in keinem Bereich liegt. Jeder Name muss genau ein Rechteck ausfüllen, denn der Browser kann einen Namen nicht in Form eines L oder in zwei getrennten Blöcken platzieren.

Die Namen legt der Container auf das Raster, und jedes Kind nimmt seinen Platz mit grid-area ein. Der Rechner schreibt eine Regel für jeden Namen, damit das Element mit dieser Klasse seine Zellen ausfüllt.

Verwenden Sie für jede Zeile der Spuren eine Zeile mit Namen, mit gleich vielen Namen in jeder Zeile.
Wählen Sie Namen, die den Teil der Seite beschreiben, etwa header, sidebar oder main, denn die Regeln werden mit diesen Namen als Klassen geschrieben.

Rechenbeispiel: eine Seite mit Kopf, Seitenleiste, Inhalt und Fuß

Das Standardlayout hat zwei Spalten, 200px und ein flexibles 1fr, und drei Zeilen: auto für den Kopf, 1fr für die Mitte und auto für den Fuß. Der Abstand beträgt in beiden Richtungen 16 px. Der Kopf reicht über beide Spalten, Seitenleiste und Hauptinhalt teilen sich die mittlere Zeile, und der Fuß liegt unten über beide Spalten.

Das CSS beginnt mit .layout { display: grid; grid-template-columns: 200px 1fr; grid-template-rows: auto 1fr auto; gap: 16px; } und danach grid-template-areas mit drei Zeilen: "header header", "sidebar main" und "footer footer". Jeder Name hat seine eigene Regel mit grid-area, daher füllt das Element header die erste Zeile.

Häufig gestellte Fragen

Was ist der Unterschied zwischen fr und auto?

Eine fr-Spur teilt den Platz, der nach den festen Spuren übrig bleibt, anteilig nach ihrer Zahl. So ist die zweite Spur bei 1fr 2fr doppelt so breit wie die erste. Eine auto-Spur ist so breit, wie ihr Inhalt es braucht, und teilt sich danach freien Platz.

Warum kann ich keine Bereiche über auto-fill-Spuren malen?

auto-fill und auto-fit bestimmen die Anzahl der Spuren aus der Breite des Kastens. Die Zahl der Zellen ist beim Bearbeiten daher nicht bekannt. Benannte Bereiche brauchen eine feste Anzahl, daher bittet der Rechner Sie, auto-fill oder auto-fit zu entfernen, sobald Bereiche gemalt werden.

Warum bekommt jeder Bereich seine eigene Regel?

grid-template-areas setzt die Namen auf das Raster, doch jedes Element muss noch angeben, welche Zelle es ausfüllt. Das übernimmt grid-area. Der Rechner schreibt für jeden Namen eine Regel mit einer Klasse gleichen Namens.

Was geschieht mit Zellen, die ich nicht male?

Eine Zelle in keinem Bereich wird in grid-template-areas als Punkt geschrieben. Die benannten Bereiche setzen dort nichts hin, daher bleibt sie leer, es sei denn, Sie platzieren dort auf anderem Weg ein Element.

Welche Browser unterstützen CSS-Grid?

CSS-Grid wird in allen gängigen aktuellen Browsern unterstützt. Nutzen Ihre Besucher ältere Versionen, prüfen Sie das Layout in diesen Versionen, bevor Sie sich auf die benannten Bereiche verlassen.

Wird mein Layout irgendwohin gesendet oder gespeichert?

Nein. Das Raster, die Vorschau und das CSS entstehen in Ihrem Browser. Nichts wird gespeichert oder an unseren Server gesendet, kopieren Sie das CSS daher, bevor Sie die Seite verlassen.

Quellen

Zahlen und Text zuletzt geprüft: Dienstag, 10. November 2026.