CSS-Rastergenerator

Definieren Sie Spalten, Zeilen und Lücken visuell und kopieren Sie dann den CSS-Grid-Vorlagencode für Ihr Layout.

CSS Grid Generator

Live

Columns3

Rows3

Gap12px

CSS output

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 12px;

Key capabilities

Definieren Sie Spalten, Zeilen und Lücken visuell und kopieren Sie dann den CSS-Grid-Vorlagencode.
Läuft in Ihrem Browser
Kostenlose Nutzung

Anleitung

Legen Sie die Anzahl der Spalten und Zeilen fest.
Passen Sie Abstand und Spurgröße an.
Kopieren Sie das Raster-CSS.

How this tool works

Legen Sie die Anzahl der Spalten und Zeilen fest.
Passen Sie Abstand und Spurgröße an.
Kopieren Sie das Raster-CSS.

Recommended settings

Verwenden Sie zunächst die Standardoptionen und passen Sie sie dann bei Bedarf an

Supported formats

Text / on-page input

File size and limits

Sehr komplexe mehrschichtige Vorschauen wirken sich auf älteren Telefonen möglicherweise langsamer aus.

Privacy

Farb- und CSS-Generatoren laufen vollständig in Ihrem Browser. Vorschauen und Konvertierungen laden Ihre Stile niemals hoch.

Common use cases

Verwenden Sie den CSS Grid Generator, wann immer Sie ihn benötigen: Definieren Sie Spalten, Zeilen und Lücken visuell und kopieren Sie dann den Code der CSS Grid-Vorlage.

Troubleshooting

Die Vorschau sieht nach dem Einfügen anders aus

Überprüfen Sie Ihre Seite auf konkurrierendes CSS (Zurücksetzungen, geerbte Farben). Kopieren Sie die generierte Regel zunächst in ein isoliertes Stylesheet.

FAQ

Lädt dies mein CSS hoch?

Nein. Generatoren und Konverter laufen in Ihrem Browser mit Live-Vorschau.

Brauche ich ein Konto?

Nein. Öffnen Sie das Tool, passen Sie die Steuerelemente an und kopieren Sie das CSS.