CSS-Grid-Generator – Grid-Layouts visuell erstellen
Spalten, Zeilen und Lücken einstellen, um ein Grid-Layout visuell zu erstellen. Unterstützt fr/px/auto Einheiten.
columnTemplate
1
2
3
rowTemplate
1
2
8px
preview
1
2
3
4
5
6
columnTemplate
1fr 1fr 1fr
rowTemplate
1fr 1fr
CSS
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 8px;
}
Verwendung
- Anzahl der Spalten und Zeilen eingeben
- Größe für jede Spalte/Zeile einstellen (fr/px/auto)
- Lücke einstellen
- Vorschau und CSS kopieren
FAQ
- Welche Grid-Eigenschaften können gesteuert werden?
- grid-template-columns, grid-template-rows, gap und mehr können visuell konfiguriert werden.
- Wird die fr-Einheit unterstützt?
- Ja. fr, px, % und andere Einheiten können verwendet werden.
- Kann das generierte CSS direkt verwendet werden?
- Ja. Kopieren Sie den Code und fügen Sie ihn direkt in Ihre CSS-Datei ein.
- Werden meine Daten an einen Server gesendet?
- Alle Verarbeitungen finden im Browser statt. Es werden keine Daten an einen Server gesendet.
- Kann ich grid-template-areas konfigurieren?
- Der visuelle Editor ermöglicht die Konfiguration von Spalten und Zeilen. Das generierte CSS enthält grid-template-columns und grid-template-rows. Benannte Bereiche können durch manuelles Bearbeiten des Ausgabe-CSS konfiguriert werden.
Verwandte Tools
Updateverlauf
Zuletzt aktualisiert: 2026-02-21
- 2026-02-21 Erstveröffentlichung