CSS-Verlauf-Generator
Lineare, radiale und konische Verläufe bauen und CSS kopieren.
Design
Flexbox- und Grid-Generator
CSS-Layouts mit Flexbox und Grid visuell bauen und Code kopieren.
Was es macht. Dieser Generator baut Layouts mit Flexbox und CSS Grid visuell auf und gibt den passenden Code aus. Die Faustregel für die Wahl: Flexbox ordnet entlang einer Achse, Grid in zwei Dimensionen gleichzeitig.
Läuft im BrowserKein UploadKeine AnmeldungFunktioniert offline
So benutzt du Flexbox- und Grid-Generator
- Wähl Flexbox oder Grid und stell die Zahl der Elemente ein.
- Pass Ausrichtung, Abstände und Spaltendefinition an — die Vorschau folgt sofort.
- Kopier das fertige CSS.
Flexbox oder Grid?
Die kurze Antwort: eine Reihe oder Spalte mit Flexbox, ein echtes Raster mit Grid.
Flexbox arbeitet entlang einer Achse. Es ist richtig für eine Navigationsleiste, eine Reihe von Schaltflächen, eine Karte mit Symbol und Text nebeneinander — überall dort, wo sich die Größen aus dem Inhalt ergeben sollen.
Grid arbeitet in zwei Dimensionen. Es ist richtig für Seitenlayouts, Kartenraster und Formulare mit Beschriftung und Feld in Spalten — überall dort, wo die Ausrichtung über Zeilen hinweg stimmen muss.
Die Frage „welches ist besser" stellt sich nicht: In einem realen Layout kommen beide vor, meist Grid für die Seitenstruktur und Flexbox innerhalb der einzelnen Bausteine.
Das Raster, das keine Media Queries braucht
Ein Muster löst den häufigsten Layoutfall vollständig und kommt ohne Breakpoints aus:
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
Das heißt: so viele Spalten wie hineinpassen, jede mindestens 240 Pixel breit, den restlichen Platz gleichmäßig verteilt. Auf einem Telefon ergibt das eine Spalte, auf einem Tablet zwei bis drei, auf einem großen Bildschirm fünf — ohne eine einzige Media Query.
Der Unterschied zwischen auto-fit und auto-fill: auto-fit lässt die vorhandenen Elemente den Platz füllen, auto-fill behält leere Spalten bei. Bei drei Karten in einem sehr breiten Fenster füllt auto-fit die Breite aus, auto-fill lässt sie schmal und links stehen.
Was regelmäßig für Verwirrung sorgt
Die Ausrichtungseigenschaften sind schwer zu behalten, weil sie sich auf Achsen beziehen, nicht auf Richtungen.
justify-* wirkt entlang der Hauptachse, align-* entlang der Querachse. Bei flex-direction: row ist die Hauptachse waagerecht — justify verschiebt also horizontal. Bei column dreht sich beides um, und dieselbe Eigenschaft verschiebt plötzlich vertikal.
In Grid ist es einfacher: justify betrifft immer die Spaltenrichtung, align immer die Zeilenrichtung, unabhängig von allem anderen.
Zwei weitere Stolpersteine: Ein Flex-Element schrumpft standardmäßig unter seinen Inhalt, was lange Wörter überlaufen lässt — min-width: 0 ist die übliche Gegenmaßnahme. Und gap funktioniert inzwischen in beiden Systemen, sodass Abstände über Ränder an den Kindelementen nicht mehr nötig sind.
Häufige Fragen
Flexbox oder Grid?
Flexbox für eine Achse, Grid für zwei. In der Praxis Grid für die Seitenstruktur, Flexbox innerhalb der Bausteine.
Wie mache ich ein responsives Raster ohne Media Queries?
Mit repeat(auto-fit, minmax(240px, 1fr)). Das passt sich der Breite von selbst an.
Was ist der Unterschied zwischen auto-fit und auto-fill?
auto-fit lässt vorhandene Elemente den Platz füllen, auto-fill behält leere Spalten bei.
Warum läuft mein Text aus dem Flex-Element heraus?
Weil Flex-Elemente nicht unter ihren Inhalt schrumpfen. min-width: 0 löst das.
Wann wirkt justify horizontal und wann vertikal?
In Flexbox je nach flex-direction. In Grid immer in Spaltenrichtung.
Wird etwas gesendet?
Nein, alles läuft in diesem Tab.
Ratgeber zu Flexbox- und Grid-Generator
- Layout and Colour Decisions in CSS8 min read