CSS Studio

CSS Grid Generator

Erstellen Sie responsive Grid-Layouts mit visuellem Editor

Einstellungen

px
px
px
%

Grid-Vorlage

1.
2.
3.
1.
2.

Häufige Werte:

• 1fr - Ein Bruchteil des verfügbaren Platzes
• 200px - Feste Pixelgröße
• auto - Automatische Größe basierend auf Inhalt
• minmax(100px, 1fr) - Responsive Größenanpassung
• repeat(3, 1fr) - Wiederholungsmuster

Presets

Grid-Elemente

Vorschau

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

Vorschau mit aktuellen Einstellungen

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 200px 200px;
  gap: 16px;
  grid-auto-flow: row;
  justify-items: stretch;
  align-items: stretch;
  justify-content: start;
  align-content: start;
}