CSS-Grid-Generator
Erstelle CSS-Grid-Layouts visuell.
Layout-Voreinstellungen (10)
Ziehe über Zellen, um ein Rechteck zu zeichnen, oder klicke jeweils eine Zelle an. Jeder benannte Bereich muss rechteckig bleiben.
Live-Vorschau
Eindimensional: CSS-Flexbox-Generator.
Ein CSS-Grid mit benannten Bereichen erstellen
Buchstabenraster für Template-Bereiche anlegen oder Voreinstellung wählen. Vorschau zeigt jede Region farblich hervorgehoben.
FAQ
Was ist grid-template-areas?
Eine Möglichkeit, Layoutbereiche (header, sidebar, main…) zu benennen und Elemente nach Namen statt nach Zeilennummern zu platzieren. Klicke unten auf Zellen, um Bereichsbuchstaben einzuzeichnen – das CSS wird live aktualisiert.
Kann ich mit einer Voreinstellung beginnen?
Ja – zehn Layout-Voreinstellungen, darunter Holy grail, dashboard, magazine und app shell, laden benannte Bereiche mit einem Klick.
Wird etwas hochgeladen?
Nein. Das CSS wird vollständig in deinem Browser erzeugt.
Zuletzt aktualisiert: