Visueller Editor mit Live-Preview
CSS Grid Generator
Erstellen Sie CSS Grid Layouts visuell. Spalten, Zeilen, Gaps und Alignment einstellen, Code sofort kopieren.
✓ Live-Preview ✓ Code-Export ✓ 100% kostenlos
100% lokal im Browser, kein Upload Ihrer Daten. Inhalte von der benannten AKARA-Redaktion.
Anzeige
Anzeige
Spalten (3)
3
C1
C2
C3
Zeilen (3)
3
R1
R2
R3
Abstand (Gap)
Gap16px
Ausrichtung
1
2
3
4
5
6
7
8
9
CSS Grid: das zweidimensionale Layout-System
CSS Grid Layout ist das mächtigste Layout-System in CSS. Es ermöglicht die gleichzeitige Kontrolle über Zeilen und Spalten, im Gegensatz zu Flexbox, das nur eine Dimension gleichzeitig handhaben kann.
Mit unserem visuellen Generator können Sie grid-template-columns, grid-template-rows, gap und Alignment-Eigenschaften interaktiv konfigurieren. Die Live-Preview zeigt sofort das Ergebnis, und der generierte Code kann direkt in Ihr Projekt übernommen werden.
CSS Grid wird von 97%+ aller Browser unterstützt und ist produktionsreif für jedes moderne Webprojekt.
Mehr zu CSS Grid
Vertiefende Ratgeber unserer Redaktion: von den Grundlagen bis zu responsiven Layouts.
CSS Grid lernen Der komplette Einsteiger-Leitfaden 2026 Die fr-Einheit erklärt fr vs px vs Prozent vs auto Grid vs Flexbox Wann welches Layout? Responsive Grid minmax und auto-fit ohne Media Queries grid-template-areas Benannte Bereiche für wartbare Layouts Browser-Support 2026 Standards, Fallbacks, Barrierefreiheit
Anzeige
Anzeige
Häufig gestellte Fragen
Was ist CSS Grid? +
CSS Grid ist ein leistungsstarkes zweidimensionales Layout-System in CSS. Es ermöglicht die präzise Positionierung von Elementen in Zeilen und Spalten gleichzeitig, ideal für komplexe Seitenlayouts, die mit Flexbox allein schwierig wären.
Wie funktioniert der CSS Grid Generator? +
Definieren Sie die Anzahl der Spalten und Zeilen, passen Sie die Größen an (fr, px, auto, minmax), stellen Sie Abstände ein und sehen Sie das Ergebnis live in der Vorschau. Der generierte CSS- und HTML-Code kann mit einem Klick kopiert werden.
Was bedeutet die Einheit "fr"? +
"fr" steht für "fraction" und teilt den verfügbaren Platz proportional auf. "1fr 2fr" bedeutet: Die zweite Spalte bekommt doppelt so viel Platz wie die erste. Es ist die flexibelste Einheit für responsive Layouts.
Kann ich den generierten Code direkt verwenden? +
Ja! Der generierte CSS- und HTML-Code ist produktionsreif und kann direkt in Ihr Projekt kopiert werden. Er folgt Best Practices und ist mit allen modernen Browsern kompatibel.
Unterstützen alle Browser CSS Grid? +
CSS Grid wird von allen modernen Browsern unterstützt: Chrome, Firefox, Safari, Edge und Opera. Der Marktanteil liegt bei über 97%. Nur der Internet Explorer hat eingeschränkte Unterstützung.
Was ist der Unterschied zwischen CSS Grid und Flexbox? +
Flexbox ist ein eindimensionales Layout-System (entweder Zeile oder Spalte). CSS Grid ist zweidimensional (Zeilen und Spalten gleichzeitig). Für Seitenlayouts ist Grid oft besser, für Komponentenlayouts ist Flexbox häufig ausreichend.
Ist der CSS Grid Generator kostenlos? +
Ja, vollständig kostenlos, ohne Registrierung und ohne Einschränkungen. Der generierte Code steht Ihnen frei zur Verfügung. Ein Service von AKARA Solutions GmbH.
Wie erstelle ich ein responsives CSS Grid ohne Media Queries? +
Mit der Kombination aus auto-fit und minmax: grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)). Die Spalten passen sich automatisch an die verfügbare Breite an, ohne dass Sie einen einzigen Breakpoint definieren müssen. Jede Spalte ist mindestens 200px breit und teilt sich den restlichen Platz gleichmäßig.
Was ist der Unterschied zwischen grid-template-areas und grid-template-columns? +
grid-template-columns definiert die Größe der Spalten (z. B. 1fr 2fr). grid-template-areas vergibt benannte Bereiche für das gesamte Raster und ordnet Elemente per Name zu, etwa "header header" / "sidebar main". Beide werden meist gemeinsam genutzt: columns/rows legen das Raster fest, areas verteilen die Inhalte darin.
Wie zentriere ich ein Element in einem CSS Grid? +
Mit place-items: center auf dem Grid-Container. Das ist die Kurzform für align-items: center und justify-items: center und zentriert alle Items zugleich horizontal und vertikal. Für ein einzelnes Element nutzen Sie place-self: center auf dem Item selbst.
Was bedeuten auto-fit und auto-fill und wo liegt der Unterschied? +
Beide erzeugen automatisch so viele Spalten wie passen. auto-fill behält leere Spalten als Platzhalter bei, wenn nicht genug Items vorhanden sind. auto-fit dagegen kollabiert leere Spalten auf 0, sodass die vorhandenen Items den ganzen Platz füllen. Für Karten-Galerien ist auto-fit meist die bessere Wahl.
Kann ich mit CSS Grid überlappende Layouts bauen? +
Ja. Wenn Sie zwei Items per grid-area oder grid-column/grid-row auf dieselbe Zelle legen, überlappen sie sich. Mit z-index steuern Sie, welches Element oben liegt. Das ist die saubere Grid-Alternative zu position: absolute für Overlay-Effekte.
Beeinflusst die visuelle Grid-Reihenfolge die Barrierefreiheit und SEO? +
Ja. CSS Grid kann Elemente visuell umordnen (z. B. mit order oder grid-row), die DOM-Reihenfolge bleibt davon unberührt. Screenreader und Tastatur folgen aber der Quellordnung im HTML. Weicht die visuelle Ordnung stark ab, entstehen WCAG-Probleme. Halten Sie die DOM-Reihenfolge daher möglichst nah an der visuellen Reihenfolge.