CSS-Grid-Playground

CSS Grid verwandelt ein Element in ein zweidimensionales Layout. Du setzt display: grid am Container, definierst die Spalten- und Zeilentracks mit grid-template-columns und grid-template-rows, und der Browser platziert jedes Kindelement in die entstehenden Zellen. Zum Beispiel erstellt grid-template-columns: repeat(3, 1fr) drei gleich breite Spalten, und Kindelemente fließen von links nach rechts, von oben nach unten in diese ein. Anders als ältere Float- oder Flexbox-Layouts richtet Grid Zeilen und Spalten gleichzeitig aus, sodass du beide Achsen über eine einzige Container-Eigenschaft steuerst.

Füge display: grid zu einem Container hinzu und beschreibe dann seine Tracks. Das Minimum ist eine Zeile: display: grid; grid-template-columns: 1fr 1fr; — das ergibt zwei gleich breite Spalten. Anschließend ergänzt du grid-template-rows für explizite Zeilen, gap für Abstände und elementspezifische Regeln wie grid-column: span 2, damit ein Kindelement sich über mehrere Zellen erstreckt. Die Kurzschreibweise grid kann Zeilen, Spalten und Bereiche in einer Deklaration kombinieren, aber die meisten Entwickler setzen grid-template-columns, gap und Ausrichtung getrennt, weil es lesbarer ist. Dieser Generator schreibt diese Regeln für dich.

Sie definieren die Größe jedes Spalten- und Zeilentracks. grid-template-columns: 200px 1fr 1fr erstellt eine feste erste Spalte mit 200px und zwei flexible Spalten, die den Rest aufteilen. grid-template-rows: auto 1fr setzt eine inhaltsbezogene erste Zeile und eine zweite Zeile, die die verbleibende Höhe ausfüllt. Jeder Wert in der Liste entspricht einem Track, und die Anzahl der Werte bestimmt, wie viele explizite Spalten oder Zeilen das Grid hat. Dieser Generator erstellt beide Listen, während du Tracks hinzufügst und bearbeitest, und aktualisiert die Live-Vorschau in Echtzeit.

fr ist die Einheit für "Bruchteil" (fraction) — sie teilt den verbleibenden Platz auf, sodass repeat(3, 1fr) drei gleich breite Spalten erstellt. repeat(n, Wert) ist eine Kurzschreibweise, die ein Track-Muster n-mal wiederholt; repeat(4, 1fr) entspricht also 1fr 1fr 1fr 1fr. minmax(min, max) definiert einen Track, der nie kleiner als min oder größer als max wird; minmax(150px, 1fr) hält eine Spalte mindestens 150px breit und lässt sie trotzdem wachsen. Kombiniere diese — repeat(auto-fit, minmax(150px, 1fr)) — für ein Grid, das Spalten automatisch hinzufügt oder entfernt, wenn sich die Containerbreite ändert.

Verwende repeat() mit auto-fit (oder auto-fill) und minmax(), damit das Grid automatisch umbricht: grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)). Jede Spalte ist mindestens 200px breit, und der Browser passt die Anzahl der Spalten an den verfügbaren Platz an — weniger Spalten auf schmalen Bildschirmen, mehr auf breiten. Wechsle diesen Generator in den Responsive-Modus, lege die minimale Zellenbreite fest und kopiere das Ergebnis. Es ist der einfachste Weg, ein flüssiges Karten-Grid zu erstellen, das sich von Mobilgerät bis Desktop anpasst, ohne eine einzige Media Query zu schreiben.

grid-template-areas erlaubt es, Bereiche zu benennen und das Layout wie ASCII-Kunst zu zeichnen. Du gibst jedem Kindelement einen Namen mit grid-area und bildest das Grid dann ab wie grid-template-areas: 'header header' 'sidebar main' 'footer footer'. Einen Namen über mehrere Zellen zu wiederholen lässt den Bereich diese überspannen, und ein Punkt (.) lässt eine Zelle leer. Es ist die lesbarste Methode, klassische Seitenstrukturen zu bauen — Header, Sidebar, Hauptinhalt, Footer — weil das Template wie das Layout aussieht. Der Tab "Areas" hier schreibt das Template und die passenden grid-area-Regeln für jeden benannten Bereich.

Für ein 2×2-Grid setze zwei Spalten und zwei Zeilen: grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; und platziere vier Elemente. Für ein 3-Spalten-Grid verwende grid-template-columns: repeat(3, 1fr) und lass Elemente in so viele Zeilen fließen, wie benötigt. In diesem Tool stellst du einfach die Anzahl der Spalten und Zeilen ein, und die Vorschau aktualisiert sich sofort — kein Tippen erforderlich. Der Generator verwendet automatisch die repeat()-Kurzschreibweise, wenn benachbarte Tracks die gleiche Größe haben.

Das 12-Spalten-Grid ist eine Design-Konvention, die durch Bootstrap und Foundation populär wurde und die Seite in zwölf gleiche Spalten unterteilt. Zwölf funktioniert deshalb gut, weil es sich sauber in Hälften, Drittel, Viertel und Sechstel teilen lässt. Eine Komponente kann eine beliebige ganze Anzahl von Spalten überspannen: 6 für die Hälfte, 4 für ein Drittel, 3 für ein Viertel. Mit CSS Grid erzeugst du es in einer Zeile: grid-template-columns: repeat(12, 1fr), und verwendest grid-column: span 4 auf Kindelementen zur Größenbestimmung. Setze die Spalten hier auf 12, um das klassische Framework-Grid als reines CSS ohne Bootstrap-Abhängigkeit zu erhalten.

Grid ist zweidimensional — es steuert Zeilen und Spalten gleichzeitig — während Flexbox eindimensional ist und Elemente entlang einer einzigen Zeile oder Spalte anordnet. Greife zu Grid, wenn du ein übergeordnetes Seiten- oder Karten-Layout mit ausgerichteten Zeilen und Spalten baust (Dashboards, Galerien, Seitenstrukturen). Greife zu Flexbox für einen einzelnen Inhaltsstreifen wie eine Navigationsleiste, eine Werkzeugleiste oder eine Reihe von Schaltflächen. Beide ergänzen sich gut: Grid für die äußere Seitenstruktur, Flexbox innerhalb einzelner Zellen.

Tailwind enthält Grid-Utilities: Füge grid plus grid-cols-3 für drei gleiche Spalten, gap-4 für Abstände und col-span-2 / row-span-2 auf Kindelementen hinzu, um sie zu erstrecken. grid-cols-3 kompiliert zu repeat(3, minmax(0, 1fr)). Für individuelle Tracks — wie einen responsiven auto-fit-Track — verwende einen beliebigen Wert: grid-cols-[repeat(auto-fit,minmax(150px,1fr))]. Wechsle die Ausgabe zum Tailwind-Tab und dieser Generator schreibt die exakten Utility-Klassen für deinen Container und jedes Element, bereit zum Einfügen in dein JSX oder HTML-Markup.

Verwende grid-column und grid-row auf dem Kindelement. grid-column: span 2 macht ein Element zwei Spalten breit; grid-column: 1 / 3 platziert es von Linie 1 bis Linie 3 (ebenfalls zwei Spalten). Das Gleiche gilt vertikal mit grid-row: span 2. In Tailwind entspricht das col-span-2 und row-span-2. In diesem Playground kannst du im Preview über Zellen ziehen, um ein überspannendes Element zu erstellen, oder genaue Start- und Span-Werte im Element-Panel eintippen. Die CSS- und Tailwind-Ausgabe aktualisiert sich dabei in Echtzeit.

Die gap-Eigenschaft fügt Platz zwischen Tracks hinzu: gap: 16px setzt 16px zwischen jede Zeile und Spalte. Du kannst die Achsen separat setzen mit gap: 24px 16px (zuerst row-gap, dann column-gap), oder row-gap und column-gap direkt verwenden. Gap betrifft nur den Abstand zwischen Zellen — er fügt nie Innenabstand am äußeren Rand des Grids hinzu, was häufig zu Verwirrung führt. Verwende die row-gap- und column-gap-Steuerelemente hier — verbinde sie für einen einheitlichen Abstand oder trenne sie, um jede Achse unabhängig anzupassen.

Vollständig kostenlos ohne Anmeldung und ohne Installation. Layoutit Grid ist ein solider Ausgangspunkt, hat aber keine Tailwind-Ausgabe und erfordert das Navigieren durch einen separaten Tab, um grid-area-Regeln zu kopieren. Sarah Drasners CSS Grid Generator ist ein minimales Lernwerkzeug ohne elementbasierte Steuerelemente oder teilbare Links. UtiloKit ergänzt Tailwind-CSS-Ausgabe, benannte Template-Bereiche, responsiven Auto-fit-Modus, teilbare Links und einen interaktiven Drag-to-Span-Element-Editor — alles an einem Ort. Alles wird lokal in deinem Browser generiert, deine Layouts werden niemals hochgeladen.

Ja. Das Tool ist vollständig responsiv und funktioniert in jedem modernen mobilen Browser, einschließlich Safari auf dem iPhone und Chrome auf Android. Erstelle Grid-Layouts unterwegs, kopiere die CSS- oder Tailwind-Ausgabe und füge sie in dein Projekt ein. Da alles client-seitig läuft, gibt es keinen Upload, kein Konto und keine Wartezeit. Es funktioniert sogar offline, sobald die Seite geladen wurde. Der Drag-to-Span-Element-Editor ist touch-freundlich, sodass du komplexe Grid-Layouts ohne Maus erstellen kannst.