CSS-Grid-Generator
Entwerfen Sie CSS-Grid-Layouts visuell: Legen Sie Spalten, Zeilen und Abstände fest, tippen Sie Bereichsnamen in die Zellen, um grid-template-areas aufzubauen – mit Live-Vorschau und kopierbarem CSS und HTML.
🔒 Wird vollständig in Ihrem Browser verarbeitet – nichts, was Sie hier eingeben, wird jemals hochgeladen.
Ergebnis
Eine grid-template-areas-Deklaration gehört zum Lesbarsten, was CSS zu bieten hat – aber erst, wenn sie einmal existiert. Von Hand dorthin zu gelangen, bedeutet Anführungszeichen-Strings zählen und Zeilenlängen abgleichen, und eine einzige nicht passende Zelle zerstört stillschweigend das ganze Layout. Dieser Generator macht daraus eine direkte Bearbeitung: Legen Sie die Spalten- und Zeilenanzahl fest, tippen Sie einen Namen in eine beliebige Zelle des Live-Rasters, und übereinstimmende Namen verschmelzen automatisch zu einer benannten Region.
Unter der Haube wird jede Zelle, die Sie leer lassen, im generierten grid-template-areas-String zu einem Punkt, und jede Zelle, die Sie benennen, wird Teil des Rechtecks dieses Namens. CSS erlaubt einer benannten Region nur, einen einzigen sauberen rechteckigen Block zu belegen, daher prüft das Werkzeug dies schon während des Tippens und sagt Ihnen genau, wann ein Name noch kein gültiges Rechteck bildet – statt stillschweigend CSS zu erzeugen, das der Browser ablehnt.
Spaltenabstand und Zeilenabstand stehen standardmäßig auf 8px und werden zu einer einzigen gap-Zeile zusammengefasst, wenn sie übereinstimmen. Das Live-Vorschau-Raster spiegelt stets Ihre grid-template-columns- und grid-template-rows-Tracks wider, einschließlich fester Pixelspalten aus einer Voreinstellung wie den 200px-Seitenschienen des Holy Grail. Die kopierbare Ausgabe deckt beide Seiten ab: einen CSS-Block für Ihr Stylesheet und ein passendes HTML-Gerüst mit einem grid-area-div pro benannter Region.
Grid und Flexbox lösen unterschiedliche Layout-Probleme, und der css-flexbox-generator auf dieser Seite ist der bessere Ausgangspunkt für eindimensionale Layouts – eine einzelne Zeile oder Spalte mit flexiblen Elementen wie eine Navigationsleiste oder einen Kartenstapel. Greifen Sie zu diesem Grid-Generator, wenn Sie stattdessen zweidimensionale Kontrolle, explizite Zeilen und Spalten oder benannte Regionen wie header/nav/main/footer benötigen; die beiden Werkzeuge landen oft auf derselben Seite – Grid für das Seiten-Grundgerüst und Flexbox für seine Bestandteile. Wie jedes Werkzeug auf dieser Seite läuft es vollständig in Ihrem Browser – kein Upload, kein Konto.