Wie erstelle ich ein CSS-Grid-Layout visuell?

Verwenden Sie Spalte hinzufügen und Zeile hinzufügen, um das Grid festzulegen, wählen Sie eine Einheit für jede Spur und passen Sie Spaltenabstand und Zeilenabstand an. Drücken Sie dann Kopieren, um das CSS oder das passende HTML zu übernehmen.

Wie viele Spalten und Zeilen kann ich hinzufügen und welche Einheiten sind verfügbar?

Bis zu 12 Spalten und 12 Zeilen. Jede Spur kann 1fr, 2fr, 3fr, auto, feste px-Werte, Prozentwerte, min-content, max-content oder minmax(100px, 1fr)-artige Bereiche sein.

Gibt es fertige Layouts als Ausgangspunkt?

Ja. Die Voreinstellungen sind Holy Grail, Seitenleiste + Inhalt, 12-Spalten und Fotogalerie. Wählen Sie eine aus und bearbeiten Sie dann die Spuren und Abstände passend zu Ihrer Seite.

Wie erstelle ich ein 12-Spalten-Grid wie Bootstrap?

Wählen Sie die 12-Spalten-Voreinstellung, die zwölf 1fr-Spalten mit 16px Abstand setzt. Sie können dann den Spaltenabstand-Schieberegler ändern, der von 0 bis 48px reicht.

Sendet das Tool mein Grid irgendwohin und kann ich ein Layout teilen?

Alles läuft in Ihrem Browser und nichts wird hochgeladen. Das Tool ist so gebaut, dass es eine Konfiguration aus der Seiten-URL wiederherstellt, sodass ein Link Ihr Grid wiederherstellen kann.

Ist es wirklich kostenlos?

Ja. Jedes Tool ist kostenlos nutzbar, ohne Konto und ohne Kreditkarte. Die Verarbeitung läuft auf Ihrem Gerät statt auf unseren Servern – genau deshalb können wir den Dienst kostenlos betreiben.

Funktioniert es auf Mobilgeräten?

Ja. Es läuft in aktuellen mobilen Browsern unter iOS und Android, ohne dass etwas installiert werden muss.

🟦

CSS-Grid-Generator – kostenlos

Entwerfen Sie visuell ein CSS-Grid — Spuren, Einheiten und Abstände — und kopieren Sie das generierte CSS und HTML.

Läuft in Ihrem BrowserKein Konto, keine Pop-upsKeine Anmeldung erforderlichFür immer kostenlos

Funktioniert nach dem Laden offline

Gestalten Sie ein CSS-Grid visuell: Fügen Sie Spalten und Zeilen hinzu, mischen Sie fr/px/auto/min-content-Einheiten, passen Sie die Abstände an und sehen Sie die Live-Vorschau. Kopieren Sie produktionsreifes CSS und passendes HTML.

Voreinstellungen

Spalten (3)

Zeilen (2)

Spaltenabstand: 16pxZeilenabstand: 16px

Live-Vorschau

css

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

html

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

🔒 Alles läuft in Ihrem Browser — nichts wird hochgeladen.

So funktioniert es

Gestalten Sie ein CSS-Grid visuell: Fügen Sie bis zu 8 Spalten und 8 Zeilen hinzu, setzen Sie jede Spur auf fr, px, auto oder min/max-content und passen Sie die Zeilen-/Spaltenabstände an. Die nummerierte Live-Vorschau aktualisiert sich sofort, und das erzeugte grid-template-CSS plus passendes HTML ist nur einen Klick von Ihrer Zwischenablage entfernt.

1
Raster formen
Spalten und Zeilen mit + und − hinzufügen/entfernen.
2
Spuren festlegen
Jede Spalte und Zeile erhält eine eigene Einheit (1fr, 100px, auto…).
3
Abstände anpassen
Separate Regler für row-gap und column-gap.
4
Code kopieren
Produktionsreifes CSS und das passende HTML-Grundgerüst.

Alles läuft in Ihrem Browser – nichts wird hochgeladen.

CSS-Grid-Generator – kostenlos

So funktioniert es

Ähnliche Tools

CSS-Flexbox-Generator

CSS-clamp()-Generator

Druckvorlagen-Papier — liniert, kariert, Punktraster und Notenpapier (PDF)

Häufige Fragen