CSS-Grid- & Flexbox-Generator
Wechsle zwischen Grid und Flexbox, passe die Layout-Eigenschaften an und beobachte die Live-Vorschau — kopiere anschließend das erzeugte CSS direkt in dein Projekt.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 12px;
}Your files are processed locally in your browser. They are not uploaded to our servers.
So funktioniert's
- Wähle den Grid- oder Flexbox-Modus.
- Passe die Layout-Regler an — Spalten und Zeilen für Grid oder Richtung, Umbruch und Ausrichtung für Flexbox.
- Kopiere das unter der Live-Vorschau angezeigte CSS.
Was ist dieses Tool?
Der CSS-Grid- & Flexbox-Generator ist ein visuelles Tool, um CSS-Layout-Code zu erstellen, ohne Eigenschaftsnamen und -werte auswendig zu kennen. Passe die Regler an und sieh sowohl eine Live-Vorschau als auch das exakte CSS, das du in dein Stylesheet einfügen kannst.
Typische Anwendungen
- Ein Grid- oder Flex-Layout entwerfen, bevor man den Code von Hand schreibt
- Lernen, wie sich CSS-Grid- und Flexbox-Eigenschaften auf das Layout auswirken
- Schnell Boilerplate-CSS für eine neue Komponente erzeugen
- Ausrichtungs- und Abstandsoptionen visuell ausprobieren
Ähnliche Tools
Häufige Fragen
Was ist der Unterschied zwischen Grid und Flexbox?
Flexbox ist für eindimensionale Layouts (eine einzelne Zeile oder Spalte) gedacht, während Grid zweidimensionale Layouts (Zeilen und Spalten zusammen) handhabt. Nutze Flexbox für einfache Ausrichtungsaufgaben und Grid für komplexere Seiten- oder Komponentenlayouts.
Funktioniert das erzeugte CSS in allen Browsern?
Ja. Sowohl CSS Grid als auch Flexbox werden von allen modernen Browsern unterstützt, sodass der erzeugte Code ohne zusätzliche Vendor-Prefixe oder Fallbacks funktioniert.
Kann ich das für ein komplettes Seitenlayout nutzen?
Ja, für komplette Seitenlayouts kombinierst du das erzeugte Container-CSS in der Regel mit eigenen Responsive-Breakpoints und inhaltsspezifischem Styling.