CSS Grid-Generator

CSS Grid ist das zweidimensionale Layoutsystem im modernen CSS: Sie beschreiben Zeilen und Spalten gleichzeitig und lassen den Browser Elemente in diese Struktur setzen. Dieser Generator bietet Regler für Spuren und Abstände, eine Live-Vorschau, drei Presets für benannte Bereiche und sauberes CSS, das Sie direkt in ein Stylesheet kopieren können. Er zielt auf die ersten 80 Prozent eines Rasters – gleiche Spalten, gleichmäßige Abstände und ein einfaches Regionsdiagramm –, damit Sie ein Layout in Sekunden beginnen können, statt Vorlagenzeichenketten von Hand zu tippen.

Verwendung

1. Ziehen Sie die Regler für Spalten und Zeilen (je 1–12) oder tippen Sie eine Zahl in das Feld daneben. Die Vorschau zeichnet sich bei jeder Änderung neu.
2. Stellen Sie column-gap und row-gap unabhängig ein, von 0 bis 48 Pixel. Da es getrennte Eigenschaften sind, können Sie enge Spaltenabstände mit großzügigen Zeilenabständen kombinieren.
3. Setzen Sie optional ein Häkchen bei benannten Bereichen und wählen Sie ein Preset – Holy Grail, Sidebar oder Cards. Die Regler rasten auf die Maße des Presets ein.
4. Kopieren Sie den .container-Block. Bei aktiven benannten Bereichen kopieren Sie zusätzlich die .area-name-Regeln, die der Generator anhängt.

Praxisbeispiele

Beispiel A – ein Kartenraster mit vier mal zwei. Spalten 4, Zeilen 2, column-gap 16, row-gap 12 ergibt:

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  column-gap: 16px;
  row-gap: 12px;
}

Beispiel B – das Holy-Grail-Preset. Benannte Bereiche aktivieren und Holy Grail wählen schaltet die Spurenzahl auf 3 × 3 um und hängt ein Diagramm an:

grid-template-areas:
  "header header header"
  "nav main aside"
  "footer footer footer";

Der Generator gibt dann eine Regel pro Region aus, etwa .header { grid-area: header; }. Jedes direkte Kind, dem Sie diese Klasse geben, wird automatisch platziert; main erstreckt sich über die einzelne mittlere Zelle, während Header und Footer alle drei Spalten überspannen.

Das generierte CSS lesen

Drei Deklarationen tragen den Großteil der Bedeutung. display: grid macht das Element zum Rastercontainer. grid-template-columns und grid-template-rows definieren die Spuren; repeat(n, 1fr) bedeutet n gleiche Bruchteile des übrigen Platzes. Die Einheit fr heißt nicht im naiven Sinn „ein n-tel des Containers“ – zuerst werden die Abstände abgezogen, dann wird der Rest aufgeteilt. Bei einem 1200px-Container mit drei Spalten und 16px-Spaltenabständen verbrauchen die Abstände 32px, und jedes 1fr ergibt (1200 − 32) ÷ 3 ≈ 389,3px. grid-template-areas ist eine visuelle Landkarte: Wiederholte Namen verschmelzen Zellen zu einer Region, ein Punkt lässt eine Zelle leer.

Spuren gegen benannte Bereiche: Was wählen

Situation	Bessere Wahl	Warum
Gleichmäßige Karten-Galerie, Elementzahl unbekannt	Einfache Spuren	Die Spurenzahl ist die einzige Entscheidung; Elemente umbrechen natürlich, sobald Sie Media Queries ergänzen
Seitengerüst mit Header, Seitenleiste, Footer	Benannte Bereiche	Das Diagramm dokumentiert das Layout und übersteht Umordnungen
Ein Feature-Block über zwei Spalten und zwei Zeilen	Benannte Bereiche	Das Wiederholen eines Namens verschmilzt Zellen, was sich mit gleichen 1fr-Spuren allein kaum ausdrücken lässt
Gemischte feste und flexible Breiten nötig	Mit Spuren beginnen, dann bearbeiten	Der Generator gibt nur 1fr aus; ersetzen Sie einzelne Spuren von Hand

Häufige Fehler

• Annehmen, Abstände verkleinerten die Spuren automatisch. Tun sie, aber nur, wenn Ihre Rasterelemente schrumpfen können. Eine min-width auf einer Karte kann eine Spur breiter als 1fr erzwingen und über 10–12 Spalten horizontales Überlaufen verursachen; wechseln Sie in diesem Fall zu minmax(0, 1fr).
• Enkelkinder gestalten. Die Rasterplatzierung gilt nur für direkte Kinder. Ein Wrapper-<div> zwischen Container und Karten bricht das beabsichtigte Layout.
• Einen Bereich im Diagramm umbenennen, aber nicht die Klasse. Die .header-Regel und die Zeichenkette "header header header" müssen exakt übereinstimmen; ein Tippfehler lässt ein Element stillschweigend unplatziert.
• Vergessen, dass benannte Bereiche ohne HTML-Umzug umordnen. Visuelle Reihenfolge und Quellreihenfolge laufen auseinander, was für Tastatur-Tab-Reihenfolge und Bildschirmleser zählt – prüfen Sie die Barrierefreiheit, wenn die visuelle Reihenfolge die Bedeutung ändert.
• Erwarten, dass die Vorschau responsiv ist. Das Demo-Raster ist fest; echte Responsivität braucht weiterhin @media-Regeln oder auto-fit/minmax, die dieser Generator nicht erzeugt.

Genauigkeit und Grenzen

Die Ausgabe verwendet standardisierte, breit unterstützte Grid-Eigenschaften, und Abstände von null werden weggelassen, damit das CSS schlank bleibt. Was Sie nicht bekommen: auto-fit, auto-fill, minmax(), subgrid, span-Steuerung pro Element oder generierte Media Queries. Spurenzahlen lösen sich immer in gleiche Bruchteile auf, und Abstände sind auf 48px begrenzt. Betrachten Sie das Ergebnis als korrekten, lesbaren Ausgangspunkt und nicht als fertiges responsives Layout.

Responsives Verhalten, das Sie noch ergänzen müssen

Der Generator gibt eine feste Spurenzahl aus, keine Container Query. Ein vierspaltiges Desktop-Raster quetscht Karten bei 375px unangenehm, sofern Sie nicht selbst Breakpoints hinzufügen. Ein verbreitetes Muster ist, den generierten Block als Desktop-Basis zu behalten und darunter zunehmend einfachere Raster zu schichten:

@media (max-width: 900px) {
  .container { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .container { grid-template-columns: 1fr; }
}

Eine Alternative ohne Media Queries ist grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)), die so viele Spalten mit mindestens 220px einpasst, wie der Container erlaubt, und den Rest umbricht. Sie ist widerstandsfähiger gegenüber unbekannten Elementzahlen, doch das Tool erzeugt sie nicht. Für eine von einem CMS gespeiste Karten-Galerie bevorzugen Sie die auto-fit-Form; für ein Seitengerüst mit benannten Regionen behalten Sie die expliziten Spuren und ergänzen einen Breakpoint, der die Regionen in eine einzelne Spalte stapelt.

Verwandte Tools

• CSS Flexbox-Generator — Eindimensionale Flexbox-Layouts mit Live-Vorschau gestalten.
• CSS Box-Shadow-Generator — Mehrschichtige Boxschatten mit Live-Vorschau gestalten.
• CSS Gradient-Generator — Eigene CSS-Verläufe für Ihre Layouts erstellen.