CSS-Grid-Generator - Visueller Grid-Layout-Ersteller

Erstellen Sie CSS-Grid-Layouts visuell mit Live-Vorschau

CSS-Werkzeuge

Tool

Grid Settings

columns (3)rows (2)gap (8px)

CSS

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

Anleitung

1Legen Sie die Anzahl der Spalten fest (1–12)
2Legen Sie die Anzahl der Zeilen fest (1–6)
3Passen Sie den Abstand zwischen den Zellen an
4Kopieren Sie den generierten CSS-Code

Häufig gestellte Fragen

CSS Grid ist ein zweidimensionales Layoutsystem, mit dem Sie Zeilen und Spalten definieren und Elemente an beliebiger Stelle im resultierenden Raster platzieren können.

'fr' steht für Fraktion. Jede Spalte oder Zeile mit '1fr' erhält einen gleichen Anteil des verfügbaren Platzes im Container.