CSS-Grid-Generator
Nur Spalten-, Zeilenzahl und Abstand festlegen – erzeugt sofort das grid-template-CSS mit Vorschau
Stell die Anzahl der Spalten und Zeilen sowie den Abstand zwischen den Feldern per Regler ein, und schon entsteht das grid-template-CSS samt Live-Vorschau. Regelmäßige Layouts wie Kartenlisten, Galerien oder Dashboards musst du nicht mehr von Hand berechnen, sondern kannst sie kopieren und direkt einfügen.
도구를 불러오는 중…
🔒 Alles läuft zu 100 % in Ihrem Browser. Ihre Dateien und Eingaben werden niemals auf einen Server hochgeladen.
Anleitung
- Gib die Anzahl der Spalten (columns) und Zeilen (rows) ein, um das Grid-Gerüst zu erstellen.
- Stell den Abstand zwischen den Feldern mit dem gap-Regler ein. Für unterschiedliche Werte waagerecht/senkrecht entferne den Haken bei „Gleich".
- Prüfe die Anordnung der Felder in der Vorschau und kopiere dann das CSS darunter.
- Legst du Kinder-Karten in das eingefügte Elternelement, ordnen sie sich automatisch im Raster an.
FAQ
- Was bedeutet 1fr?
- fr steht für fraction (Anteil) und bezeichnet einen gleich großen Teil des übrigen Platzes. repeat(3, 1fr) teilt die Breite des Elternelements in drei gleiche Spalten.
- Wie ändert sich die Spaltenzahl automatisch mit der Bildschirmgröße?
- Ersetzt du grid-template-columns durch repeat(auto-fit, minmax(200px, 1fr)), entsteht ein responsives Grid, dessen Spaltenzahl bei geringerer Breite automatisch abnimmt. Im Hinweistext findest du ein Beispiel.
- Kann ich dem erzeugten CSS blind vertrauen?
- Es werden ausschließlich standardmäßige CSS-Grid-Eigenschaften verwendet, daher funktioniert es in aktuellen Browsern direkt. Die Vorschau zeigt aber nur Beispielfelder, prüfe die echten Inhaltshöhen und Ausrichtungen daher zur Sicherheit im Projekt.