CSS-Grid-Generator

Legen Sie eine Anzahl von Spalten, Zeilen und einen Abstand fest, um sofort den passenden CSS-Grid-Code mit Live-Vorschau zu erhalten.

Beispiel:

So funktioniert's

Mit CSS Grid können Sie ein zweidimensionales Raster mit einer einzigen Eigenschaft definieren, im Gegensatz zu Flexbox, das jeweils nur eine Achse verwaltet. Dieses Tool generiert grid-template-columns und grid-template-rows mit gleich großen Spalten und Zeilen (1fr) – praktisch für eine Bildergalerie oder ein Dashboard mit einem Klick.

Was bedeutet „1fr“ im generierten Code?

Die Einheit fr (Bruchteil) verteilt den verfügbaren Platz zu gleichen Teilen auf die Spalten oder Zeilen; repeat(3, 1fr) erzeugt also drei gleich breite Spalten, die sich den gesamten Platz des Containers teilen.

Kann ich Spalten unterschiedlicher Größe haben?

Ja, dieses Tool erzeugt einen einfachen Ausgangspunkt mit gleich großen Spalten; Sie können dann grid-template-columns manuell bearbeiten, um feste oder unterschiedliche Werte wie 200px 1fr 2fr zu verwenden.

100% lokal: Der Code wird vollständig in Ihrem Browser per WebAssembly generiert.