CSS Grid Generator

Visueller Playground zum Erstellen von CSS Grid-Layouts mit Live-Vorschau

Grid-Container-Eigenschaften

Spalten 3

Spaltengrosse

Zeilen 3

Zeilengrosse

gap (px) 10

justify-items

align-items

Anzahl Elemente 6

Grid-Element-Eigenschaften

Element wahlen

grid-column-start

grid-column-end

grid-row-start

grid-row-end

Layout-Voreinstellungen

Live-Vorschau

Generiertes CSS

Alle Verarbeitung erfolgt in Ihrem Browser. Keine Daten werden gesendet.

Anwendungsbeispiele

2-Spalten-Layout

Erstellen Sie ein einfaches Zwei-Spalten-Layout fur Inhalt und Seitenleiste.

Dashboard-Raster

Bauen Sie ein Dashboard-Layout mit unterschiedlich grossen Widgets.

Bildergalerie

Erstellen Sie ein responsives Bildergalerie-Raster mit gleich grossen Zellen.

Funktionen

Live visuelle Vorschau

Sehen Sie Ihr Grid-Layout in Echtzeit aktualisiert

Fertiger CSS-Code

Erhalten Sie sauberen CSS-Code fur Grid-Container und Elemente

Layout-Voreinstellungen

Schnellstart mit gangigen Grid-Voreinstellungen

Grid-Element-Spannung

Konfigurieren Sie Elemente uber mehrere Spalten oder Zeilen

Wie benutzt man es?

Grid-Eigenschaften festlegen

Wahlen Sie Spalten, Zeilen, Grossen, Gap und Ausrichtung.

Elemente konfigurieren

Fugen Sie Elemente hinzu und konfigurieren Sie grid-column und grid-row.

CSS kopieren

Kopieren Sie den generierten CSS-Code und verwenden Sie ihn.

Haeufig gestellte Fragen

Verwenden Sie Grid für zweidimensionale Layouts, bei denen Sie gleichzeitig Zeilen und Spalten steuern müssen — seitenlevelweite Strukturen wie Header/Sidebar/Inhalt/Footer, Dashboard-Karten und Fotogalerien. Verwenden Sie Flexbox für einachsige Ausrichtung innerhalb einer Komponente, etwa zum Zentrieren von Elementen in einer Navbar oder zum Verteilen von Buttons in einer Zeile. Grid und Flexbox ergänzen sich: Grid übernimmt das Makro-Layout, Flexbox die Mikro-Ausrichtung innerhalb jeder Zelle.

fr steht für „Bruchteil des verfügbaren freien Platzes". Nachdem Spalten mit fester Größe (px, auto) ihren Platz belegt haben, wird die verbleibende Breite in Bruchteile aufgeteilt. grid-template-columns: 1fr 2fr 1fr erzeugt drei Spalten, wobei die mittlere doppelt so viel Platz erhält wie jede der äußeren Spalten. Die Verwendung von fr ist die bevorzugte Methode, um fließende Grids zu erstellen, die sich ohne Media Queries an verschiedene Bildschirmbreiten anpassen.

Trennen Sie jede Track-Größe mit einem Leerzeichen: grid-template-columns: 200px 1fr 1fr erstellt eine 200px-breite feste Sidebar und zwei gleichbreite fließende Spalten. Sie können Einheiten mischen: 1fr auto 1fr lässt die mittlere Spalte auf ihre Inhaltsbreite schrumpfen. Die Kurzform repeat() vereinfacht Wiederholungen: repeat(3, 1fr) ist identisch mit 1fr 1fr 1fr. Dieses Tool generiert die korrekte Kurzform in der CSS-Ausgabe.

gap (früher grid-gap) fügt Abstand zwischen den Grid-Tracks hinzu, nicht an den äußeren Kanten des Grids. Das ist fast immer gewünscht: gleichmäßige Abstände zwischen den Zellen ohne zusätzliches padding um den Container. margin fügt Abstand um einzelne Grid-Elemente hinzu, was an den Kanten uneinheitlich wird und zur Gesamtgröße des Containers beiträgt. Verwenden Sie gap für Zwischenräume und padding am Grid-Container für Luft um das gesamte Layout.

Setzen Sie grid-column-start und grid-column-end am Element. Zum Beispiel: grid-column: 1 / 3 lässt das Element bei Linie 1 beginnen und bei Linie 3 enden, sodass es 2 Spalten überspannt. Sie können auch das Schlüsselwort span verwenden: grid-column: span 2. Dieselbe Logik gilt für Zeilen mit grid-row. Wählen Sie ein Grid-Element in diesem Tool und legen Sie dessen Start-/Endwerte fest, um automatisch das korrekte CSS zu generieren.

Beide arbeiten mit repeat(), um so viele Tracks zu erstellen, wie in den Container passen: repeat(auto-fill, minmax(200px, 1fr)). Der Unterschied zeigt sich, wenn Elemente nicht alle verfügbaren Spalten füllen. auto-fill behält leere Spalten im Grid und erhält die Track-Struktur. auto-fit reduziert leere Spalten auf null und lässt gefüllte Elemente den Platz nutzen. Für die meisten responsiven Karten-Grids liefert auto-fit das natürlichere Verhalten.

grid-template-areas ermöglicht es, das Layout mit einer visuellen ASCII-artigen Karte zu definieren. Beispiel: grid-template-areas: "header header" "sidebar content" "footer footer". Dann werden Elemente den Bereichen mit grid-area: header, grid-area: sidebar usw. zugewiesen. Das macht komplexe Layouts lesbar und leicht umstrukturierbar mit einer Media Query — einfach grid-template-areas für den neuen Breakpoint neu definieren.

Nein. Alles läuft in Ihrem Browser. Ihre Grid-Konfigurationen verlassen Ihr Gerät nie.

Was ist der CSS Grid Generator?

Der CSS Grid Generator ist ein visueller Spielplatz, auf dem Sie Spalten, Zeilen, Abstaende und Element-Spanning einrichten und das Layout live aktualisiert sehen. Wenn es passt, kopieren Sie das saubere CSS und fuegen es in Ihr Projekt ein. Keine Syntax auswendig lernen.

Wichtige Funktionen

Konfigurieren Sie Spalten und Zeilen mit flexibler Groessenangabe (fr, px, auto). Passen Sie gap, justify-items und align-items auf Container-Ebene an. Waehlen Sie einzelne Elemente und setzen Sie grid-column/grid-row Werte fuer Spanning. Sechs Layout-Voreinstellungen fuer schnelle Starts.

Typische Anwendungsfaelle

Seitenlayouts mit Header, Seitenleiste, Hauptinhalt und Footer. Dashboard-Layouts mit unterschiedlich grossen Widget-Karten. Fotogalerien mit gleichmaessigen Zellen. Magazin-Layouts, bei denen einige Artikel mehrere Spalten umfassen.

Tipps

Verwenden Sie fr-Einheiten fuer flexible Layouts, die sich der Bildschirmgroesse anpassen. Die gap-Eigenschaft ist sauberer als Margins an jeder Zelle. Starten Sie mit einer Voreinstellung und passen Sie die Groessen an Ihr Design an.

Datenschutz

Laeuft vollstaendig in Ihrem Browser. Keine Grid-Konfigurationen oder Daten verlassen Ihren Rechner.

Sicherheit und Datenschutz

Ihre Datensicherheit ist unsere Priorität

Lokale Verarbeitung

Alle Verarbeitung erfolgt in Ihrem Browser

Keine Datenübertragung

Ihre Daten werden nicht an unsere Server gesendet

Keine Datenspeicherung

Es werden keine Daten gespeichert oder geteilt

SSL-Verschlüsselung

SSL-Verschlüsselung für sichere Verbindung

Nächster Schritt

CSS Flexbox Generator

Visueller CSS Flexbox Playground mit Live-Vorschau und Code-Generierung

HTML-Tabellen-Generator

Visueller HTML-Tabellen-Builder mit Live-Vorschau

War dieses Werkzeug hilfreich?

CSS Grid Generator

Grid-Container-Eigenschaften

Grid-Element-Eigenschaften

Layout-Voreinstellungen

Live-Vorschau

Generiertes CSS

Anwendungsbeispiele

2-Spalten-Layout

Dashboard-Raster

Bildergalerie

Funktionen

Live visuelle Vorschau

Fertiger CSS-Code

Layout-Voreinstellungen

Grid-Element-Spannung

Wie benutzt man es?

Grid-Eigenschaften festlegen

Elemente konfigurieren

CSS kopieren

Haeufig gestellte Fragen

Wann sollte ich CSS Grid statt Flexbox verwenden?

Was bedeutet die Einheit "fr"?

Was ist die Syntax für grid-template-columns?

Was ist der Unterschied zwischen gap und margin für den Grid-Abstand?

Wie lasse ich ein Grid-Element mehrere Spalten oder Zeilen überspannen?

Was ist der Unterschied zwischen auto-fill und auto-fit?

Was sind benannte Grid-Template-Bereiche?

Sendet dieses Tool Daten irgendwohin?

Was ist der CSS Grid Generator?

Wichtige Funktionen

Typische Anwendungsfaelle

Tipps

Datenschutz

Sicherheit und Datenschutz

Lokale Verarbeitung

Keine Datenübertragung

Keine Datenspeicherung

SSL-Verschlüsselung

Nächster Schritt

CSS Flexbox Generator

HTML-Tabellen-Generator

Verwandte Werkzeuge

JSON-Pfadfinder

Pomodoro-Timer

Cron-Ausdruck-Generator

Box Shadow Generator

Regex-Tester

Robots.txt-Generator