CSS Grid Generator

Gestalte ein CSS-Grid visuell — setze Spalten, Zeilen, Abstände und verbundene Zellen, dann kopiere das grid-template-CSS. Alles läuft in deinem Browser.

Der CSS Grid Generator läuft vollständig in deinem Browser. Die Spalten, Zeilen, Track-Größen, Abstände und verbundenen Zellen, die du konfigurierst, verlassen niemals dein Gerät und nichts wird zu ArrayKit hochgeladen.

CSS Formatter öffnen

Über CSS Grid Generator

Der CSS Grid Generator lässt dich ein Grid-Layout nach Augenmaß bauen und das exakte CSS kopieren, das es erzeugt. Wähle eine Spalten- und Zeilenanzahl, dimensioniere jeden Track mit fr-Einheiten, Pixeln, Prozenten, auto oder minmax(), und setze den Abstand. Eine Live-Vorschau zeigt das Grid; klicke zwei Zellen an, um sie zu einer überspannten Region zu verbinden, und das Tool schreibt die passenden grid-column- und grid-row-Regeln für dich. Läufe von drei oder mehr identischen Tracks werden zu repeat() zusammengefasst, sodass die Ausgabe aufgeräumt bleibt, und du kannst den Selektor umbenennen, damit er zu deiner eigenen Klasse passt. Gemacht für Frontend-Entwickler, die Karten, Dashboards und Seitengerüste anlegen und korrektes grid-template-CSS wollen, ohne Zeilen von Hand zu zählen. Der Editor läuft vollständig in deinem Browser, sodass nichts, was du eingibst, hochgeladen wird.

Funktionen

So verwendest du CSS Grid Generator

  1. Wähle, wie viele Spalten und Zeilen dein Layout braucht
  2. Dimensioniere jeden Track mit fr, px, %, auto oder minmax()
  3. Setze den Abstand und einen Spaltenabstand, falls er sich unterscheiden soll
  4. Klicke zwei Zellen in der Vorschau an, um eine überspannte Region zu verbinden
  5. Kopiere das erzeugte CSS in dein Stylesheet

Beispiel

Eingabe

columns: 200px 1fr 1fr 1fr
rows: auto
gap: 20
merge: cols 2-4

Ausgabe

.grid {
  display: grid;
  grid-template-columns: 200px repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 20px;
}

.grid > :nth-child(1) {
  grid-column: 2 / span 3;
  grid-row: 1;
}

Drei gleiche Spalten werden zu repeat(3, 1fr) zusammengefasst und die verbundenen Zellen überspannen drei Tracks.

Häufige Fehler & Fehlerbehebung

Häufig gestellte Fragen

Was gibt der CSS Grid Generator aus?
Er erzeugt eine Container-Regel mit display: grid, grid-template-columns, grid-template-rows und gap, plus eine grid-column-/grid-row-Regel für jede verbundene Region, die du erstellst. Du kopierst den ganzen Block in dein Stylesheet.
Wann werden meine Tracks zu repeat() zusammengefasst?
Drei oder mehr identische benachbarte Tracks werden zu repeat(n, value) gefaltet. Einer oder zwei hintereinander bleiben ausgeschrieben, da repeat() die Ausgabe erst ab drei Tracks verkürzt. Gemischte Sequenzen verschachteln wörtliche Tracks und repeat()-Gruppen.
Wie verbinde ich Zellen, um mehrere Spalten oder Zeilen zu überspannen?
Klicke eine Zelle in der Vorschau an, dann klicke eine zweite Zelle an. Das Tool wählt das Rechteck dazwischen und schreibt grid-column und grid-row mit der richtigen Startlinie und Spanne. Klicke einen verbundenen Block erneut an, um ihn wieder in einzelne Zellen aufzuteilen.
Kann ich minmax(), auto und Prozente für Track-Größen verwenden?
Ja. Jeder Track akzeptiert einen fr-Wert, eine Pixellänge, einen Prozentwert, auto oder minmax(min, max). Bloße Zahlen werden als fr behandelt, und der minmax()-Abstand wird normalisiert, sodass das kopierte CSS konsistent ist.
Warum verwendet die erzeugte Regel einen :nth-child()-Selektor?
Verbundene Regionen werden nach Position platziert, sodass das Tool über :nth-child() in Quellreihenfolge auf die Grid-Kinder zielt. Benenne den Container-Selektor auf deine eigene Klasse um, und die Platzierungsregeln folgen ihm automatisch.
Wird das Grid, das ich gestalte, irgendwohin gesendet?
Nein. Der CSS Grid Generator baut das Template- und Platzierungs-CSS vollständig in deinem Browser. Die Spalten, Zeilen, Abstände und verbundenen Zellen, die du setzt, verlassen niemals dein Gerät und werden nicht zu ArrayKit hochgeladen.

Verwandte Tools

Alle ArrayKit-Tools