CSS-Grid-Generator
Visueller CSS-Grid-Editor mit Zeilen × Spalten (beliebiger Track-Wert: fr, px, %, auto, minmax, repeat), unabhängigen Zeilen- und Spaltenabständen, benannten Grid-Areas mit Klick-zum-Malen, justify/align für Items und Content, 6 fertigen Vorlagen und Live-Vorschau. Ausgabe als reines CSS (mit .area-Selektoren) oder Tailwind-Klasse mit beliebigem Wert.
Everything runs in your browser. Nothing is uploaded.
So verwenden Sie diesen css-grid-generator
- Wählen Sie eine Vorlage (12-Spalten, Holy Grail, Dashboard, Bento, Gallery, Card row) oder setzen Sie Zeilen + Spalten selbst.
- Bearbeiten Sie jede Spur mit gültigem CSS: 1fr, 200px, minmax(120px, 1fr), repeat(auto-fill, minmax(180px, 1fr)).
- Justieren Sie Zeilen-/Spaltenabstände mit den Reglern.
- Aktivieren Sie 'benannte Grid-Areas', um Zellen mit Bereichsnamen zu malen — wählen Sie eine Farbe und klicken Sie Zellen.
- Stellen Sie justify/align für Items und Content ein, kopieren Sie das resultierende CSS oder Tailwind.
Häufig gestellte Fragen
Was ist grid-template-areas?
Eine Methode, ein Grid zu layouten, indem jeder Zelle ein Name gegeben wird und Kind-Elemente diesen Namen via `grid-area` zugewiesen werden. Ideal für Header/Sidebar/Main/Footer.
Was ist der Unterschied zwischen fr, auto und minmax?
`fr` teilt den verbleibenden Platz unter den Spuren. `auto` passt sich dem Inhalt an. `minmax(min, max)` begrenzt eine Spur zwischen zwei Werten — mit `repeat(auto-fill, ...)` ergibt das responsive Grids.
Deckt die Tailwind-Ausgabe alles ab?
Bestmöglich: einfache Muster (grid-cols-N, gap, items-X) nutzen integrierte Klassen; komplexe Spuren fallen auf Selektoren mit beliebigem Wert zurück.
Warum funktioniert `gap` in meinem Grid auf älterem Safari nicht?
`gap` für CSS Grid wird ab Safari 10.1 (2017) unterstützt, `gap` für Flexbox ab Safari 14.1 (2021). Wenn du iOS 13 oder älter unterstützt, weiche auf `grid-row-gap` und `grid-column-gap` aus (funktionieren seit Safari 10) und nutze Margins auf Flex-Kindern statt `gap`.