CSS-Grid-Generator

CSS-Grid-Layout visuell gestalten — Spalten, Zeilen und Abstände anpassen, Zellen klicken, um Bereiche zu erstellen, und den generierten Code kopieren

Spalten

Zeilen

Spaltengrößen

Zeilengrößen

Abstand

Grid-Vorschau

1.1

1.2

1.3

2.1

2.2

2.3

3.1

3.2

3.3

Generiertes CSS

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