CSS Grid Generator

CSS Grid Generator

Kostenloser CSS Grid Generator: Live-Vorschau, CSS und Tailwind gleichzeitig, grid-template-areas Editor und auto-fill vs auto-fit Demo. Keine Anmeldung.

Aktualisiert Juni 2026

Schnell-Vorlagen
Layout-Konfiguration
Modus
3
2
16px
Eigene Track-Größen
justify-items stretch
align-items stretch
Interaktiver Canvas
6/12
Code 
<div class="grid grid-cols-3 grid-rows-2 gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
Element

Klicke auf ein Element im Canvas, um seine Spalten- und Zeilen-Spans zu bearbeiten.

Auto-fill vs Auto-fit Labor

auto-fill erstellt so viele Tracks wie möglich und behält leere bei — auto-fit kollabiert leere Tracks, sodass sich Elemente über die Zeile strecken. Bewege den Slider, um den Unterschied zu sehen.

3
160px
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
1
2
3

CSS Grid Generator — Visueller Builder mit Tailwind- und CSS-Ausgabe

Erstelle jedes CSS Grid Layout visuell — Spalten, Zeilen, Gap und Item-Spans anpassen und das Grid in Echtzeit aktualisieren sehen. Dieser CSS Grid Generator exportiert das Layout als reines CSS und Tailwind-Klassen gleichzeitig — das bietet kein anderes Grid-Tool. Mit einem Preset starten (Holy Grail, Dashboard, Card Grid) oder von Grund auf bauen.

Darüber hinaus gibt es einen visuellen grid-template-areas Editor für benannte Layouts, responsive Breakpoints mit Mobile-First Media Queries und ein interaktives auto-fill vs auto-fit Labor — der verwirrendste Teil von CSS Grid, endlich praktisch erklärt.

So funktioniert der CSS Grid Generator

Vom leeren Grid zum produktionsreifen Code in unter einer Minute:

  1. Preset wählen oder Tracks definieren — auf Holy Grail, Dashboard, Card Grid, Magazine, Mosaic, App Shell oder 12-Column klicken, oder die Slider für Spalten und Zeilen ziehen. Der interaktive Canvas aktualisiert sich sofort.
  2. Items formen — im Spans-Modus ein Item im Canvas anklicken und col-span, row-span und Startposition anpassen. Im Areas-Modus Area-Namen (header, sidebar, main) direkt in die Editor-Matrix eintippen — das Layout ordnet sich live neu an.
  3. Tracks verfeinern — eigene Track-Größen wie 200px 1fr minmax(150px, 1fr) eingeben, um feste und flexible Spalten zu mischen; Canvas und Code spiegeln jede Änderung wider.
  4. Code kopieren — zwischen den Tabs Tailwind, CSS, HTML und Responsiv wechseln und auf Kopieren klicken (oder Shift+Enter drücken). Der Responsiv-Tab erzeugt automatisch Mobile-First Media Queries.

CSS Grid Generator — Beispiele

Einige reale Konfigurationen und der exakte Code, den der Generator erzeugt:

Beispiel — Card-Grid mit 3 Spalten:

Config:   3 Spalten, 2 Zeilen, Gap 16px
CSS:      display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
Tailwind: grid grid-cols-3 grid-rows-2 gap-4

Beispiel — Holy Grail Layout (benannte Areas):

Config: Spalten 200px 1fr 200px, Areas "header header header" / "sidebar main aside" / "footer footer footer"
CSS:    grid-template-areas: "header header header" "sidebar main aside" "footer footer footer";
        .header { grid-area: header; } …

Beispiel — Item über 2 Spalten:

Config:   Item 1 mit col-span 2
CSS:      .item-1 { grid-column: span 2; }
Tailwind: <div class="col-span-2">1</div>

Beispiel — eigene Tracks mit minmax (Sonderfall):

Config:   grid-template-columns: 200px 1fr minmax(150px, 1fr)
Tailwind: grid-cols-[200px_1fr_minmax(150px,1fr)]   ← Arbitrary Value, automatisch generiert

Beispiel — leere Zelle in benannten Areas (Sonderfall):

Config:  eine Zelle im Areas-Editor leer lassen
Ausgabe: grid-template-areas: "header header" ". main"   ← der Punkt ist eine gültige leere Zelle

CSS Grid — Was es ist und warum es wichtig ist

CSS Grid Layout ist ein zweidimensionales Layoutsystem, das Spalten und Zeilen gleichzeitig steuert. Anders als Flexbox, das eindimensional arbeitet (eine Zeile ODER eine Spalte), platziert Grid Elemente auf beiden Achsen zugleich — ideal für Seitenlayouts, Dashboards, Card-Grids und jede UI, in der sich Elemente horizontal und vertikal ausrichten müssen.

Die fr-Einheit ist die Superkraft von Grid: Sie steht für einen Anteil des verbleibenden Raums, nachdem feste Tracks platziert wurden. grid-template-columns: 200px 1fr 1fr in einem 800px-Container ergibt eine 200px-Sidebar und zwei 300px-Spalten — ohne Prozentrechnung. Kombiniert mit minmax() und repeat(auto-fill, …) entstehen vollständig responsive Grids ohne eine einzige Media Query.

Häufige Anwendungsfälle

  • Seitenlayouts (Holy Grail): Header, Footer und drei Spalten dazwischen in sechs Zeilen CSS — ein Layout, das früher Float-Hacks erforderte. Das Holy-Grail-Preset erzeugt es sofort.
  • Dashboards: feste Sidebar plus flexibler Inhaltsbereich mit Stats- und Widget-Zonen. Benannte Areas halten das CSS lesbar, wenn das Dashboard wächst.
  • Produkt-/Card-Galerien: repeat(auto-fill, minmax(250px, 1fr)) erzeugt eine Galerie, die von 4 Spalten auf 1 umbricht, wenn der Viewport schrumpft — ganz ohne Breakpoints.
  • Tailwind-Projekte: der Tailwind-Tab liefert grid-cols-*, col-span-* und Arbitrary Values wie grid-cols-[200px_1fr] — direkt einsetzbar in React-, Vue- oder Svelte-Komponenten.
  • Magazin-/Editorial-Layouts: ein Hero in voller Breite kombiniert mit asymmetrischen Artikelspalten über das Magazine-Preset, Spans pro Block anpassbar.

Häufige Fehler mit CSS Grid

  • auto-fit statt auto-fill verwenden: Bei wenigen Items streckt auto-fit sie über die gesamte Zeile — eine einzelne Card kann den ganzen Container füllen. Das Labor unter dem Canvas zeigt beide Varianten im Vergleich.
  • Nicht-rechteckige benannte Areas: grid-template-areas verlangt, dass jede Area ein Rechteck bildet. Eine L-förmige Area macht das gesamte Template stillschweigend ungültig und der Browser fällt auf Auto-Placement zurück.
  • fr mit % verwechseln: 1fr ist ein Anteil des übrigen Raums, 33% ein Anteil des gesamten Containers — Prozente kombiniert mit gap verursachen Overflow; fr berücksichtigt Gaps automatisch.
  • Spans größer als die Track-Anzahl: ein Item mit col-span-4 in einem 3-Spalten-Grid erzwingt eine implizite vierte Spalte. Der Generator begrenzt Spans in der Vorschau auf die Spaltenanzahl, um das sichtbar zu machen.

Häufig gestellte Fragen

Was ist der Unterschied zwischen auto-fill und auto-fit in CSS Grid?

Beide erzeugen mit repeat() so viele Tracks, wie in den Container passen. Der Unterschied zeigt sich, wenn die Items die Zeile nicht füllen: auto-fill behält leere Tracks bei und hält die Track-Größen konsistent, während auto-fit leere Tracks auf null kollabiert, sodass sich vorhandene Items über den Platz strecken. auto-fit eignet sich für Galerien, die immer die volle Breite füllen sollen; auto-fill, wenn konsistente Spaltengrößen wichtiger sind.

Was ist die fr-Einheit in CSS Grid?

Die fr-Einheit (fraction) steht für einen Anteil des verfügbaren Raums, nachdem Tracks mit fester Größe platziert wurden. grid-template-columns: 200px 1fr 1fr in einem 800px-Container ergibt 200px, 300px und 300px. Anders als Prozente rechnet fr mit dem verbleibenden Raum und berücksichtigt Gaps — zuverlässiger beim Mischen fester und flexibler Tracks.

Wie erstelle ich ein responsives Grid ohne Media Queries?

Mit grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)). Das erzeugt so viele Spalten mit mindestens 250px, wie in den Container passen, und passt die Anzahl automatisch an den Viewport an — 4 Spalten auf dem Desktop, 2 auf dem Tablet, 1 auf dem Smartphone, ganz ohne Media Queries. Im auto-fill vs auto-fit Labor dieses Generators lässt sich das Muster live testen.

Wie funktioniert grid-template-areas?

Es definiert das Layout als visuelle Textkarte: Jeder String in Anführungszeichen ist eine Zeile, jedes Wort eine benannte Area, und ein Punkt (.) markiert eine leere Zelle. Elemente werden mit grid-area: name zugewiesen. Die Einschränkung: Jede Area muss rechteckig sein — den Namen über mehrere Zellen wiederholen, damit eine Area mehrere Spalten oder Zeilen umfasst. Der Areas-Modus dieses Generators baut das Template, während die Namen in die Zellen getippt werden.

Kann ich das Grid als Tailwind-Klassen exportieren?

Ja — der Tailwind-Tab wandelt die Konfiguration in Echtzeit in Utility-Klassen um: grid-cols-3, gap-4, col-span-2 und so weiter. Eigene Track-Größen werden zu Arbitrary Values wie grid-cols-[200px_1fr_200px], benannte Areas nutzen Tailwinds Arbitrary-Property-Syntax ([grid-area:header]) — auch komplexe Layouts funktionieren ohne Änderungen an der Tailwind-Konfiguration.

Ressourcen

Verwandte Tools