Flexbox- und Grid-Generator

So nutzen Sie den Flexbox- und Grid-Generator

1. Wählen Sie ein Layout: Flexbox oder Grid, oder starten Sie mit einer der Vorlagen (Zentriert, Navigationsleiste, Umbrechende Karten, Seitenleiste, Responsives Kartenraster, Holy Grail, 12 Spalten).
2. Stellen Sie die Eigenschaften des Containers ein. Für Flexbox: flex-direction und flex-wrap. Für Grid: grid-template-columns, grid-template-rows, grid-auto-flow, justify-items und grid-template-areas. Beide Modi teilen sich justify-content, align-items, align-content, row-gap (px) und column-gap (px).
3. Verwalten Sie die Elemente mit Element hinzufügen, Ausgewähltes Element entfernen und Ausgewähltes Element zurücksetzen. Klicken Sie in der Vorschau auf ein Element (oder springen Sie mit der Tabulatortaste dorthin und drücken Sie die Eingabetaste), um es auszuwählen.
4. Bearbeiten Sie das ausgewählte Element: order und align-self in beiden Modi, flex-grow, flex-shrink und flex-basis bei Flexbox sowie grid-area, grid-column, grid-row und justify-self bei Grid.
5. Kopieren Sie den CSS-Code und den passenden HTML-Code mit den jeweiligen Schaltflächen Kopieren.

Jedes Bedienelement ist ein normales Formularfeld, der gesamte Generator lässt sich also allein mit der Tastatur bedienen. Das CSS enthält nur die Eigenschaften, die Sie gegenüber den Standardwerten geändert haben – so bleibt es kurz. Elemente mit identischen Einstellungen teilen sich eine Regel (.item, wenn alle übereinstimmen). Alles läuft lokal in Ihrem Browser.

Flexbox in Kürze

Flexbox ordnet Elemente entlang einer Achse an. flex-direction legt die Hauptachse fest (Zeile oder Spalte), justify-content verteilt die Elemente entlang dieser Achse (center, space-between …) und align-items positioniert sie auf der Querachse. Mit flex-wrap: wrap rutschen Elemente, die nicht mehr passen, in eine neue Zeile, und align-content verteilt dann diese Zeilen.

Jedes Element hat drei Größeneigenschaften, die meist gemeinsam als flex geschrieben werden:

• flex-basis: die Ausgangsgröße (auto richtet sich nach dem Inhalt oder nach width);
• flex-grow: wie viel des freien Platzes das Element übernimmt (0 = keinen, 1 = einen gleichen Anteil);
• flex-shrink: wie viel es abgibt, wenn der Platz knapp wird (0 = schrumpft nie).

Die Vorlage Seitenleiste zeigt das klassische Muster: eine Seitenleiste mit flex-basis: 200px und flex-shrink: 0 und einen Hauptbereich mit flex-grow: 1.

CSS Grid in Kürze

Grid ordnet Elemente in zwei Dimensionen an. grid-template-columns: repeat(3, 1fr) erzeugt drei gleich breite Spalten, fr ist ein Anteil des freien Platzes. repeat(auto-fill, minmax(120px, 1fr)) erzeugt so viele mindestens 120 px breite Spalten, wie hineinpassen – ein responsives Kartenraster ganz ohne Media Query.

Die Elemente füllen die Zellen der Reihe nach, sofern Sie sie nicht platzieren: grid-column: span 2 macht ein Element zwei Spalten breit, grid-column: 1 / -1 zieht es über die ganze Zeile.

Mit grid-template-areas zeichnen Sie das Layout mit Namen. Tippen Sie eine Rasterzeile pro Zeile, z. B. header header und darunter nav main, und geben Sie den Elementen grid-area: header oder grid-area: main. Ein Punkt markiert eine leere Zelle. Jede Zeile braucht dieselbe Anzahl an Zellen, und jeder Name muss ein Rechteck bilden – andernfalls warnt Sie das Tool.