Visueller CSS Grid Generator online
CSS Grid visuell erstellen (Spalten, Zeilen, Abstand), direkt in Ihrem Browser.
1fr = equal fraction of space. Adapt to your needs (px, %, auto…).
🔒 100 % clientseitig — keine Daten gesendet
Erstellen Sie Ihr CSS Grid-Layout visuell, indem Sie Spalten, Zeilen und Abstand festlegen, und kopieren Sie anschließend den generierten Code. Die Vorschau aktualisiert sich live, zu 100 % in Ihrem Browser, ohne Registrierung. Ideal, um komplexe Layouts zu prototypisieren, ohne das gesamte CSS von Hand zu schreiben.
What is it for?
- ▸ Ein Grid aus Spalten und Zeilen mit grid-template definieren
- ▸ Den Abstand zwischen Zellen mit der gap-Eigenschaft festlegen
- ▸ Eine Galerie oder ein Dashboard mit CSS Grid prototypisieren
- ▸ CSS Grid lernen, indem Sie die Wirkung jeder Einstellung sehen
FAQ
Wie erstelle ich ein responsives CSS Grid?
Definieren Sie Ihre Spalten im Generator mit flexiblen Einheiten wie fr und minmax; er erzeugt die passende grid-template-columns-Deklaration, die Sie in Ihr CSS kopieren.
Sollte ich CSS Grid oder Flexbox verwenden?
Grid eignet sich für zweidimensionale Layouts (Spalten und Zeilen), während Flexbox ideal für die Ausrichtung entlang einer einzelnen Achse ist; häufig werden beide kombiniert.
Was macht die gap-Eigenschaft in einem Grid?
Die gap-Eigenschaft legt den Abstand zwischen Grid-Spalten und -Zeilen fest, ohne Ränder an den Außenkanten hinzuzufügen; die Vorschau zeigt das Ergebnis in Echtzeit.