Über dieses Tool
Der CSS-Grid-Generator ist ein kostenloses Tool, das direkt im Browser läuft und drei einfache Steuerelemente – Spaltenanzahl, Zeilenanzahl und Abstand – in ein einfügefertiges CSS-Grid-Layout verwandelt. Legen Sie die Werte fest, sehen Sie zu, wie sich eine Live-Vorschau neu zeichnet, und kopieren Sie die erzeugte Regel.
Spalten und Zeilen sind ganze Zahlen von 1 bis 12 (Standard 3 und 2), und der Abstand ist ein Schieberegler von 0 bis 40 Pixeln (Standard 10). Beide Dimensionen werden mit repeat() und der Einheit 1fr geschrieben, sodass jede Spur den verfügbaren Raum gleichmäßig teilt. Die Vorschau füllt jede Zelle mit einem nummerierten, farbigen Block, sodass Sie die Spurstruktur auf einen Blick sehen, und die Ausgabe ist eine schlichte .grid-Regel mit display: grid, grid-template-columns, grid-template-rows und gap. Ein Klick kopiert sie in Ihre Zwischenablage.
Alles läuft vollständig in Ihrem Browser – keine Uploads, keine Konten, kein Tracking – und es funktioniert weiter offline, sobald die Seite geladen ist.