CSS-Grid-Generator

Passen Sie grid-template-columns/rows, justify-items, align-items und gap über eine interaktive Oberfläche an und sehen Sie sich echte CSS-Grid-Layouts live in der Vorschau an. Den generierten CSS-Code können Sie mit einem Klick kopieren.

Zuletzt aktualisiert: 2026-09-20

Eine CSS-Grid-Anordnung von Hand aufbauen

CSS Grid ist das zweidimensionale Anordnungsverfahren, das Zeilen und Spalten zugleich beherrscht. Dieses Werkzeug lässt Sie `grid-template-columns` und `rows`, `justify-items`, `align-items` und `gap` am Bildschirm umschalten, das Ergebnis dabei bestätigen und das fertige CSS herauskopieren.

**Die Wahl zwischen diesem und Flexbox fällt leicht, wenn man in einer oder zwei Achsen denkt.** Für eine einzelne Reihe genügt Flexbox; **für eine Anordnung, in der Zeilen und Spalten gemeinsam fluchten müssen, passt Grid besser.** Grids eigentümliche Stärke ist die Einheit `fr`, die einen Anteil am übrigen Raum ausdrückt: Schreibt man `1fr 2fr`, so teilt sich die verbleibende Breite im Verhältnis eins zu zwei. **Das Zweite, was man sich merken sollte, ist die Form `repeat(auto-fit, minmax(200px, 1fr))`.** Sie allein liefert **eine Anordnung, deren Spaltenzahl mit der Breite steigt und fällt, ohne eine einzige Medienabfrage.**

So gehen Sie vor

Beginnen Sie mit einer Vorlage Gängige Anordnungen wie drei Spalten oder Kopfbereich mit Seitenleiste liegen bereit.
Ändern Sie die Spalten- und Zeilendefinitionen **Mit `fr` lässt sich der übrige Raum nach Verhältnis aufteilen.**
Probieren Sie die Ausrichtungseigenschaften `justify-items` und `align-items` bestimmen, wie der Inhalt in jeder Zelle sitzt.
Kopieren Sie das erzeugte CSS Befriedigt die Anordnung, lässt sie sich unmittelbar in Ihren Quelltext einfügen.

Tipps für die Nutzung

Die Einheit fr in grid-template-columns: repeat(3, 1fr) steht für einen Anteil am verbleibenden Platz, sodass das Verhältnis der Spalten auch bei sich ändernder Fensterbreite gleich bleibt.
Die Eigenschaft gap wirkt sich nur auf den Abstand zwischen Zeilen und Spalten aus, anders als margin, das auch den Außenbereich des Grids beeinflusst. Sie können row-gap und column-gap auch getrennt festlegen.
Spuren mit dem Wert "auto" passen sich an die tatsächliche Größe ihres Inhalts an – praktisch für Spalten oder Zeilen mit unvorhersehbarer Inhaltslänge.
Mit einer Überschreibung wie grid-column: span 2 für ein einzelnes Element können Sie zum Beispiel nur den Header oder Footer über die gesamte Breite des Grids strecken.
Greifen Sie zu Grid, wenn Sie ein vollständig zweidimensionales Layout brauchen, und zu Flexbox, wenn eine einzelne Zeile oder Spalte von Elementen ausreicht (siehe auch unseren CSS-Flexbox-Generator).

Wofür Sie es nutzen können

Um das Gerüst einer ganzen Seite zu bauen

**Kopfbereich, Seitenleiste, Hauptteil und Fußbereich zu setzen ist genau das, worin Grid stark ist.**

Um Karten in einem Raster anzuordnen

**`auto-fit` mit `minmax` verbunden lässt die Spaltenzahl mit der Bildschirmbreite wechseln.**

Um ein Formular auszurichten

Fluchten die Spalten von Beschriftungen und Feldern, läuft die Senkrechte gerade und liest sich weit besser.

Um Grid zu erlernen

Einen Wert zu ändern und das Ergebnis zu betrachten macht deutlich, wie Zeilen und Spalten zustande kommen.

Begriffe zu CSS Grid

Rasterbehälter: Das Elternelement, dem `display: grid` gegeben wird. In ihm werden Zeilen und Spalten festgelegt.
Fr: **Die Einheit, die einen Anteil am übrigen Raum ausdrückt.** Bei `1fr 2fr` teilt sich die verbleibende Breite eins zu zwei.
Grid-template-columns: Legt Abfolge und Breiten der Spalten fest. `repeat()` erspart das erneute Ausschreiben desselben Wertes.
Minmax: Die Funktion, die ein Mindest- und ein Höchstmaß nennt. **`minmax(200px, 1fr)` heißt „sichere 200 Bildpunkte und wachse, wenn Platz ist".**
Auto-fit: Das Schlüsselwort, das so viele Spalten bildet, wie hineinpassen. **Mit `minmax` verbunden bricht es ohne jede Medienabfrage um.**
Gap: Der Abstand zwischen Zeilen und Spalten. Beide Richtungen lassen sich getrennt festlegen.

Häufig gestellte Fragen

Verwenden Sie CSS Grid, wenn Sie Zeilen und Spalten gleichzeitig steuern müssen, etwa für das grundlegende Seitenlayout oder ein Dashboard. Verwenden Sie Flexbox, wenn eine einzelne Richtung (eine Zeile oder eine Spalte) von Elementen ausreicht, etwa bei einer Navigationsleiste oder einer Reihe von Karten. In vielen echten Projekten werden beide kombiniert: Grid für das Seitenlayout, Flexbox innerhalb einzelner Komponenten.

fr steht für "fraction" (Anteil) und beschreibt einen Anteil am übrig gebliebenen Platz innerhalb des Containers. Bei grid-template-columns: 1fr 2fr wird der Platz beispielsweise so aufgeteilt, dass die zweite Spalte doppelt so breit wird wie die erste. Anders als eine absolute Einheit wie px behalten fr-Spuren ihr Verhältnis bei, wenn sich der Container in der Größe ändert.

repeat() ist eine Kurzschreibweise, um dasselbe Spurmuster mehrmals zu wiederholen, sodass repeat(3, 1fr) dasselbe bedeutet wie grid-template-columns: 1fr 1fr 1fr. Die Schreibweise bleibt auch bei vielen oder sich dynamisch ändernden Spalten kompakt, da nur Anzahl und Spurgröße angegeben werden müssen.

Das "Holy-Grail"-Layout ist eine klassische Webseitenstruktur aus Header, Sidebar, Hauptinhalt und Footer. Vor CSS Grid waren dafür komplizierte Umwege über float oder Tabellen-Markup nötig, doch Eigenschaften wie grid-template-areas ermöglichen es, dieses vertraute Layout mit nur wenigen Zeilen CSS nachzubauen.

grid-column: span N lässt ein Element sich horizontal über N Spuren (Spalten) erstrecken. Weist man beispielsweise nur dem Header-Element grid-column: span 3 zu, nimmt dieses die gesamte Breite eines 3-spaltigen Grids ein, während die übrigen Elemente in ihren normalen Zellen bleiben (grid-row unterstützt dieselbe span-Syntax).

Übrigens – die "zweite Dimension", die CSS Grid anstrebt und Flexbox nicht abdeckt

CSS Grid Layout wurde als zweidimensionales Layoutsystem entworfen, mit dem sich Zeilen und Spalten gleichzeitig definieren lassen – im Gegensatz zu Flexbox, das sich auf die Anordnung von Elementen in einer einzigen Richtung konzentriert. Die Standardisierung beim W3C begann etwa 2011, und nachdem Chrome, Firefox, Safari und Edge 2017 nahezu zeitgleich Unterstützung ausgeliefert hatten, verbreitete sich der Einsatz in realen Projekten schnell.

Bevor es Grid gab, erforderte die Anordnung einer Seite nach der klassischen "Holy-Grail"-Struktur aus Header, Sidebar, Hauptinhalt und Footer komplizierte Umwege über float oder Tabellen-Markup. CSS Grid führte deklarative Eigenschaften wie grid-template-columns, grid-template-rows und grid-template-areas ein, mit denen sich dieses vertraute Layout mit nur einer Handvoll Zeilen CSS nachbauen lässt.

Heute wird ein Großteil der Designarbeit hinter Dashboard-Oberflächen, Bildergalerien und magazinartigen Layouts, die sich um Zeilen und Spalten drehen, mit CSS Grid umgesetzt. Auch die Unterstützung für "Subgrid", mit dem ein verschachteltes Grid die Spurgrößen seines übergeordneten Grids übernehmen kann, hat sich in den wichtigsten Browsern verbreitet und erleichtert es, komplexe, mehrstufige Layouts konsistent zu halten.

In der Praxis hat sich die Konvention etabliert, dass Grid das grundlegende Seitenlayout übernimmt und Flexbox die Anordnung der Elemente innerhalb einzelner Komponenten regelt. Beide sind keine konkurrierenden Technologien, sondern sich ergänzende Werkzeuge mit jeweils unterschiedlichen Stärken (eindimensionale Ausrichtung versus zweidimensionale Rasteranordnung), und die Kombination beider auf einer einzigen Seite gilt als gängige Praxis.

Alle Wissenstexte ansehen