CSS Grid Generator
Erstellen Sie CSS Grid Layouts mit Spalten, Zeilen und Abständen für Ihre Stylesheets.
Tool ausführen
Dieser CSS Grid Generator erstellt sauberen CSS-Code für moderne Raster-Layouts im Webdesign. Sie legen die Struktur für Spalten und Zeilen fest und steuern die Abstände flexibel nach Ihren Anforderungen. Wenn Sie für Spalten eine reine Zahl wie 3 eingeben, wandelt der Generator diese automatisch in die CSS-Schreibweise repeat(3, 1fr) um. Ebenso können Sie individuelle Breiten wie 200px 1fr oder feste Prozentangaben eintragen. Zeilenangaben lassen sich als auto, mit festen Pixeln oder als Zahlenwert definieren, der in repeat(Zahl, auto) formatiert wird. Für Abstände geben Sie numerische Werte ein, die der Generator automatisch in Pixel umwandelt. Neben einem einheitlichen Gesamtabstand lassen sich Spaltenabstand und Zeilenabstand getrennt einstellen. Werte von 0 werden in den CSS-Regeln übersprungen, damit der erzeugte Code schlank bleibt. Das Ergebnis enthält direkt die Deklaration display: grid sowie die passenden Vorlagen für Spalten und Zeilen, die Sie sofort in Ihr Stylesheet übernehmen können.
Anleitung
- Geben Sie die gewünschte Spaltenanzahl als Ziffer ein oder tragen Sie ein individuelles Muster wie 200px 1fr ein.
- Legen Sie die Zeilenstruktur fest, zum Beispiel auto oder eine Ziffer für wiederkehrende Zeilen.
- Tragen Sie bei Bedarf Werte für den allgemeinen Abstand, den Spaltenabstand oder den Zeilenabstand in Pixeln ein.
- Starten Sie die Generierung, um den fertigen CSS-Code im Ausgabefeld anzuzeigen.
- Kopieren Sie die erzeugten Deklarationen direkt in Ihre CSS-Klasse.
Beispiele
- Spalten auf 3, Zeilen auf auto und Abstand auf 16 setzen: Erzeugt display: grid, grid-template-columns: repeat(3, 1fr), grid-template-rows: auto und gap: 16px.
- Spalten auf 250px 1fr, Zeilen auf 2, Spaltenabstand auf 20 und Zeilenabstand auf 10 setzen: Erzeugt ein zweispaltiges Raster mit repeat(2, auto) für Zeilen und getrennten Abstandsregeln.
FAQ
Was passiert bei der Eingabe reiner Zahlen für Spalten?
Geben Sie nur eine Zahl wie 4 ein, wird diese automatisch in die Syntax repeat(4, 1fr) umgewandelt.
Welche Einheit verwendet das Tool für Abstände?
Alle eingegebenen Zahlenwerte für Abstände werden im CSS-Code als Pixelwerte mit der Einheit px ausgegeben.
Kann ich eigene CSS-Einheiten wie rem oder Prozent für Spalten nutzen?
Ja, benutzerdefinierte Textangaben wie 1fr 2fr oder 20% 80% werden direkt unverändert in die CSS-Vorlage übernommen.
Warum erscheint keine gap-Zeile im Code?
Wenn der Wert für den Abstand auf 0 gesetzt ist oder leer bleibt, wird die entsprechende gap-Deklaration weggelassen.