⚡Alle Werkzeuge 💻Entwickler & Code 📝Text & Schreiben 🎨Design & Farben 🖼️Bild & Multimedia 🔢Mathematik & Rechner 🔒Sicherheit & Schlüssel 📄PDF-Werkzeuge 📐Einheitenrechner

CSS Flexbox & Grid Layout-Generator

Konfiguriere und visualisiere CSS Flexbox- und Grid-Layouts visuell, sieh Animationen und kopiere CSS-Code.

Elementanzahl

Flussrichtung (flex-direction)

Hauptachsen-Ausrichtung (justify-content)

Querachsen-Ausrichtung (align-items)

Zeilenumbruch (flex-wrap)

Abstand (gap) 12px

Live-Vorschau Container

Generierter CSS-Code

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  gap: 12px;
}

HTML-Beispielcode

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

So funktioniert das Tool

1 Öffne CSS Flexbox & Grid Layout-Generator und gib die zu verarbeitenden Inhalte ein oder wähle sie aus.
2 Passe Optionen und Ausgabeformat an deine Aufgabe an.
3 Prüfe das Ergebnis und kopiere oder lade die verfügbare Ausgabe herunter.

Typische Einsatzbereiche

Konfiguriere und visualisiere CSS Flexbox- und Grid-Layouts visuell, sieh Animationen und kopiere CSS-Code. Geeignet für Alltag, Entwicklung, Lernen und schnelle Prüfungen.

Datenschutz und Verarbeitung

Dieses Tool läuft im Browser. Prüfe vor sensiblen Daten, ob du deinem Gerät und Browser vertraust.

CSS-Flexbox- und Grid-Layout-Generator: visuell einstellen und Code kopieren

Mit diesem Tool baust du Flexbox- oder CSS-Grid-Layouts über Menüs, ohne die Syntax auswendig zu kennen. Oben wechselst du zwischen Flexbox-Modus und CSS Grid-Modus, legst mit Plus und Minus 1 bis 12 Elemente fest und wählst die Eigenschaften. Die Live-Vorschau übernimmt jede Änderung sofort, darunter erscheinen das CSS für den Container und die passende HTML-Struktur, jeweils mit eigenem Kopier-Button. Die Standardausgabe lautet .container { display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; flex-wrap: nowrap; gap: 12px; }

Im Flexbox-Modus stellst du flex-direction (row, row-reverse, column, column-reverse), justify-content für die Hauptachse (inklusive space-between, space-around und space-evenly), align-items für die Querachse (inklusive stretch und baseline) sowie flex-wrap ein. Denk daran, dass die Hauptachse der Richtung folgt: Mit flex-direction: column steuert justify-content die vertikale und align-items die horizontale Ausrichtung. Passen die Elemente nicht in die Breite, quetscht nowrap sie in eine Zeile – erst wrap lässt sie umbrechen.

Der Grid-Modus bietet gängige Spaltenvorlagen: gleich breite Spalten von repeat(2, 1fr) bis repeat(4, 1fr), eine breitere Mittelspalte mit 1fr 2fr 1fr und die responsive Variante repeat(auto-fit, minmax(100px, 1fr)), die so viele Spalten setzt, wie in die Containerbreite passen. Zeilen können auto, repeat(2, 80px) oder 1fr 1fr sein; justify-items und align-items positionieren jedes Element horizontal und vertikal in seiner Zelle. Beide Modi teilen sich den Abstand-Regler gap (0 bis 40 px), der Spalten und Zeilen zugleich trennt und sauberer ist als Außenabstände an jedem Element.

Der erzeugte Code enthält nur die Layout-Regeln für .container und die HTML-Struktur der .item-Elemente; Farben, Größen und Innenabstände der Elemente gestaltest du selbst. Eine einfache Faustregel: Flexbox für eindimensionale Anordnungen wie eine Button-Reihe, eine Navigationsleiste oder das Zentrieren eines Elements, Grid für zweidimensionale Layouts, bei denen Zeilen und Spalten zusammenpassen müssen, etwa Kartenraster oder Dashboards. Alles aktualisiert sich sofort im Browser – probiere ruhig aus, was jede Eigenschaft bewirkt.

Häufige Fragen

Soll ich Flexbox oder Grid verwenden?

Flexbox eignet sich für eindimensionale Anordnungen entlang einer Zeile oder Spalte, etwa Navigationsleisten, Button-Gruppen oder zentrierte Elemente. Grid eignet sich für zweidimensionale Layouts, in denen Zeilen und Spalten fluchten müssen, wie Kartenlisten oder Seitengerüste. Beide lassen sich gut kombinieren: Grid für die Seitenstruktur, Flexbox innerhalb der Komponenten.