Design / Layout

CSS-Grid-Generator (visuelles Tool für Grid-Template-Areas)

Lege Spalten, Zeilen und Abstände fest, ziehe über Zellen, um Bereiche wie Header, Seitenleiste und Hauptinhalt zu erstellen, und kopiere direkt einfügbares CSS mit grid-template-columns, grid-template-rows und grid-template-areas.

CSS-Grid-Generator (visuelles Tool für Grid-Template-Areas): Die Größen der Spalten und Zeilen werden während der Eingabe übernommen, zum Beispiel 200px 1fr 1fr, und wiederholte Größen werden zu repeat(). Jeder Bereich wird zu einem Namen in grid-template-areas; leere Zellen werden durch einen Punkt dargestellt. Außerdem wird eine Regel erzeugt, die ein Element mit grid-area platziert. Bereiche müssen Rechtecke sein und dürfen sich nicht überschneiden, wie es CSS vorschreibt. Das Layout wird in diesem Browser gespeichert. Läuft zu 100% lokal in deinem Browser, ohne Datei-Uploads zum Server.

Kategorie
Entwicklerwerkzeuge
Ausführungen
In deinem Browser
Kosten
Kostenlos · ohne Anmeldung
Verfügbarkeit
Einsatzbereit
CSS-Grid-GeneratorLokale Verarbeitung

Läuft vollständig in deinem Browser

Ziehe über die Zellen, um einen Bereich zu erstellen. Er kann sich über mehrere Zeilen und Spalten erstrecken. Gib Spurgrößen wie 1fr, 200px, auto oder minmax(100px, 1fr) ein.

CSS

.grid {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
  grid-template-areas:
    "header  header  header"
    "sidebar main    main"
    "footer  footer  footer";
}

.header { grid-area: header; }

.sidebar { grid-area: sidebar; }

.main { grid-area: main; }

.footer { grid-area: footer; }

Gib jedem untergeordneten Element die Klasse seines Bereichs. Als Punkt dargestellte Zellen bleiben leer.

Benannte Bereiche

Jede Zeichenfolge in grid-template-areas entspricht einer Zeile, und jedes Wort einer Zelle: "header header" "sidebar main" platziert den Header über beide Spalten. Ein Kindelement mit grid-area: main füllt jede Zelle, die als main benannt ist. Die Namen müssen nicht mit Klassennamen übereinstimmen, aber gleiche Namen machen das CSS leichter lesbar.

Gängige Track-Größen

minmax(200px, 1fr) hält eine Spalte mindestens 200 px breit, lässt sie aber wachsen. auto passt sich an den Inhalt an. repeat(auto-fill, minmax(12rem, 1fr)) erzeugt so viele Spalten, wie hineinpassen – ein typisches Muster für Kartenraster. Mit dem CSS-clamp-Generator lassen sich Abstände flexibel gestalten.

So benutzt du es

  1. Wähle die Anzahl der Spalten und Zeilen und gib ihre Größen ein.
  2. Ziehe über Zellen, um Bereiche zu erstellen, und benenne sie um.
  3. Kopiere das CSS und gib jedem untergeordneten Element die Klasse seines Bereichs.

Datenschutz & Einschränkungen

Das Layout wird in deinem Browser erstellt.

Ähnliche Tools

CSS clamp()BoxschattenCSS-FormatiererFlexboxClip-Path

Häufige Fragen

Was bedeutet fr?

Ein Anteil des verfügbaren Platzes: 1fr 2fr macht die zweite Spalte doppelt so breit wie die erste, nachdem feste Größen und Abstände abgezogen wurden.

Warum dürfen sich Bereiche nicht überschneiden oder L-förmig sein?

grid-template-areas akzeptiert nur Rechtecke, wobei jeder Name nur einmal vorkommen darf. Überlappende Elemente sind in CSS Grid möglich, benötigen aber statt benannter Bereiche ausdrücklich angegebene Liniennummern.

Wie mache ich das Layout responsiv?

Verwende das erzeugte CSS für das breite Layout und definiere grid-template-columns und grid-template-areas in einer Media Query für schmale Bildschirme neu.

Kostenloses Tool · läuft in deinem browser · kein Konto nötig