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
Geprüft von Rafael Duarte
<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>Klicke auf ein Element im Canvas, um seine Spalten- und Zeilen-Spans zu bearbeiten.
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.
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));So funktioniert's
Vom leeren Raster zum fertigen Code in unter einer Minute
1. Preset wählen oder Spalten/Zeilen selbst festlegen
Holy Grail, Dashboard, Card Grid als Startpunkt — oder Spalten, Zeilen und Gap frei über die Regler einstellen.
2. Elemente positionieren oder Bereiche benennen
Im Spans-Modus per Klick col-span/row-span setzen. Im Bereiche-Modus die Namen direkt in die Matrix eintragen.
3. Den passenden Code kopieren
Tailwind, reines CSS, HTML oder den Reiter Responsive mit fertigen Mobile-First-Media-Queries.
Was dieser CSS-Grid-Generator kann
CSS und Tailwind gleichzeitig, visueller Editor für benannte Bereiche
CSS und Tailwind parallel
Beide Ausgaben stehen nebeneinander auf dem Bildschirm — kein manuelles Übersetzen zwischen den Formaten nötig.
Editor für grid-template-areas
Bereichsnamen direkt in die Zellen der Matrix schreiben, das Layout ordnet sich live neu an.
Labor für auto-fill vs. auto-fit
Der Teil von CSS Grid, an dem die meisten hängen bleiben — hier zum Anfassen als interaktive Demo.
Reiter Responsive
Erzeugt automatisch Mobile-First-Media-Queries aus der bereits konfigurierten Grid-Struktur.
Ausrichtung über justify-items und align-items
Elemente innerhalb der Zellen ausrichten — stretch, start, center oder end — direkt im Panel, ohne eine Zeile CSS zu schreiben.
Exakte Positionierung mit col-start/row-start
Zusätzlich zu den Spans lässt sich festlegen, in welcher Spalte und Zeile ein Element beginnt — praktisch, um Zellen gezielt zu überspringen oder zu überlappen.
Beispiele
Wann sich dieser Generator lohnt
Die häufigsten Szenarien in der Praxis
Vollständiges Seitenlayout (Holy Grail)
Header, Footer und drei Spalten dazwischen — das Preset baut die komplette Struktur sofort auf.
Dashboards und Admin-Oberflächen
Feste Seitenleiste plus flexibler Inhaltsbereich — benannte Bereiche halten das CSS lesbar, auch wenn das Dashboard wächst.
Produktgalerien und Card-Layouts
auto-fill mit minmax lässt eine Galerie ohne einen einzigen Media Query von 4 Spalten auf 1 zusammenschrumpfen.
Projekte mit Tailwind CSS
Der Tailwind-Reiter liefert grid-cols-*, col-span-* und beliebige Werte, fertig zum Einsetzen in React, Vue oder Svelte.
Redaktionelle Layouts im Magazin-Stil
Das Preset Magazine kombiniert einen breiten Hero-Bereich mit asymmetrischen Spalten — ideal für Blogs und Content-Seiten.
12-Spalten-Rastersysteme
Das Preset 12-Column bildet das klassische Raster aus Design-Frameworks nach, jedes Element belegt einen Bruchteil der Gesamtbreite.
Typische Fehler bei CSS Grid
Benannte Bereiche, die kein Rechteck bilden
Ein Bereich in L-Form macht das gesamte Template ungültig, ohne Warnung — der Browser fällt zurück auf automatische Platzierung.
fr mit % verwechseln
1fr ist ein Bruchteil des Platzes, der nach den fixen Tracks übrig bleibt; % bezieht sich auf die Gesamtbreite. Beides zusammen mit Gap führt schnell zu Overflow.
Span größer als die Anzahl der Spalten
col-span-4 in einem Grid mit 3 Spalten zwingt den Browser, eine vierte, implizite Spalte zu erzeugen, die gar nicht geplant war.
auto-fit statt auto-fill verwendet
Bei wenigen Elementen streckt auto-fit die vorhandenen Karten, bis die Zeile voll ist — im Extremfall füllt eine einzelne Karte den kompletten Container, ohne dass es auffällt.
Warum diesen CSS-Grid-Generator nutzen
Der visuelle Editor für grid-template-areas und das Labor für auto-fill vs. auto-fit machen genau die zwei Konzepte greifbar, an denen CSS Grid in der Theorie am meisten Kopfzerbrechen bereitet.
Der Reiter Responsive erzeugt die Mobile-First-Media-Queries automatisch — die Breakpoints müssen nach dem Bauen des Layouts nicht mehr von Hand nachgetragen werden.
Anders als Flexbox, das Elemente nur in einer Richtung anordnet, steuert CSS Grid Spalten und Zeilen gleichzeitig. Deshalb deckt dieses Tool alles ab, vom kompletten Seitenlayout bis zur Feinjustierung eines einzelnen Elements — an einem Ort.
auto-fill vs. auto-fit
Der Vergleich, der bei CSS Grid am häufigsten für Verwirrung sorgt
Häufig gestellte Fragen
Beide erzeugen mit repeat() so viele Tracks wie in die Zeile passen. Füllen die Elemente die Zeile nicht vollständig, behält auto-fill die leeren Tracks bei, während auto-fit sie kollabiert und die vorhandenen Elemente streckt.
Weiterführende Ressourcen
Verwandter Artikel
Como criar layouts responsivos sem frameworks (CSS puro em 2026)
Verwandte Tools
- Farbkontrast-Prüfer Design Kostenloser Farbkontrast-Prüfer — WCAG 2.2 AA- und AAA-Konformität sofort prüfen. Live-Textvorschau, Farbenblindheit-Simulation und barrierefreie...
- Farbkonverter & Generator Design Farben zwischen HEX, RGB, HSL und CMYK sofort konvertieren. Kostenloser Online-Farbwähler mit WCAG-Kontrastprüfer und Palettengenerator.
- Farbpaletten-Generator Design Harmonische Farbpaletten aus jeder Basisfarbe generieren. Analogie, Komplementär, Triadisch oder Tetriadisch — als CSS-Variablen oder JSON exportieren.
- Farbpalette aus Bild Design Extrahiere Farbpaletten aus jedem Bild — erhalte HEX-, RGB-, HSL-Codes und exportiere als CSS-Variablen, Tailwind, JSON oder PNG. 100% clientseitig, kein...
- CSS Box Shadow Generator — Neumorphismus, Glasmorphismus & Tailwind Design Kostenloser CSS Box Shadow Generator mit Live-Vorschau. Erstelle Schatten, Neumorphismus- und Glasmorphismus-Effekte. Exportiere zu CSS, Tailwind oder CSS-Variablen.
