CSS-Grid-Generator
Nur Spalten-, Zeilenzahl und Abstand festlegen – erzeugt sofort das grid-template-CSS mit Vorschau
도구를 불러오는 중…
🔒 Alles läuft zu 100 % in Ihrem Browser. Ihre Dateien und Eingaben werden niemals auf einen Server hochgeladen.
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.
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.