CSS-Grid-Generator
Bauen Sie ein CSS-Raster (Spalten, Zeilen, Gap) live und kopieren Sie das CSS.
- Sofort
- Kostenlos
- Privat (lokal verarbeitet)
- Ohne Anmeldung
Ein CSS-Raster, live gebaut
Wählen Sie die Zahl der Spalten, Zeilen und das Gap: die Vorschau zeigt die Zellen in Echtzeit und das Container-CSS ist kopierbereit.
-
Spalten einstellen
1 bis 8 gleiche Spuren (1fr).
-
Zeilen und Gap einstellen
Zeilenzahl und Abstand.
-
CSS kopieren
Auf Ihren Grid-Container anwenden.
Das Container-CSS (Standard)
| Eigenschaft | Wert |
|---|---|
| display | grid |
| grid-template-columns | repeat(3, 1fr) |
| grid-template-rows | repeat(2, 1fr) |
| gap | 8px |
Die Einheit 1fr teilt den Raum gleichmäßig. Für Responsivität ersetzen Sie durch repeat(auto-fit, minmax(...)). Alles wird lokal erzeugt.
Häufige Fragen
Was ist der Unterschied zwischen CSS Grid und Flexbox?
Flexbox ordnet Elemente auf einer Achse an (Zeile oder Spalte); Grid arbeitet in zwei Dimensionen (Spalten und Zeilen zugleich). Grid eignet sich für ganze Seitenlayouts, Flexbox für einfache Ausrichtungen.
Was bedeutet repeat(3, 1fr)?
Kurzform für „3 Spalten zu je 1 Fraktion“. Die fr-Einheit teilt den verfügbaren Raum gleichmäßig. repeat(3, 1fr) erzeugt also drei gleich breite Spalten, die den Container füllen.
Wie mache ich das Raster responsiv?
Ersetzen Sie eine feste Zahl durch repeat(auto-fit, minmax(200px, 1fr)): die Spalten passen sich automatisch an die Breite an. Dieses Tool erzeugt eine Basis mit fester Anzahl zum späteren Anpassen.
Gilt das CSS für den Container oder die Zellen?
Für den Container: display: grid und die grid-template-Eigenschaften definieren die Struktur. Kindzellen platzieren sich automatisch in den erzeugten Spuren.