CSS-Grid-Code mit Spalten, Zeilen und Abständen erzeugen

Mit dem CSS Grid Generator erzeugen Sie CSS-Grid-Code aus Spalten-, Zeilen- und Abstandswerten. Zahlen werden bei Spalten und Zeilen in passende repeat-Vorlagen überführt, während eigener CSS-Text erhalten bleibt.

CSS-Grid-Code aus Spalten, Zeilen und Abständen erzeugen

Mit dem CSS Grid Generator erstellen Sie CSS für ein Raster aus wenigen Eingaben. Sie bestimmen, wie viele Spalten und Zeilen vorgesehen sind, und können Abstände für das gesamte Raster oder getrennt für beide Richtungen angeben. Für einfache Layouts reichen Zahlenwerte; bei spezielleren Aufteilungen tragen Sie eigene CSS-Texte ein. Das Ergebnis enthält die wesentlichen Grid-Deklarationen, sodass Sie die erzeugte Struktur anschließend in Ihr Stylesheet übernehmen und dort im passenden Kontext prüfen können. Die Eingaben für Spalten und Zeilen werden zunächst als Text behandelt. Dadurch können Zahlen ebenso wie Angaben wie 200px 1fr verarbeitet werden, ohne dass Sie eine Spaltenvorlage manuell formulieren müssen. Die Suchanfrage „CSS Grid mit Spalten, Zeilen und Abständen generieren“ ist eine passende Arbeitsbeschreibung für diesen Zweck.

So gehen Sie vor

1. Tragen Sie im Feld für die Spalten entweder eine reine Zahl oder eine eigene Vorlage ein. Der Wert 3 wird als Text interpretiert und in repeat(3, 1fr) umgewandelt. Eine Eingabe wie 200px 1fr bleibt als eigene Spaltendeklaration bestehen.

2. Geben Sie für die Zeilen eine Zahl, auto oder anderen CSS-Text an. Eine reine Zahl wie 2 erhält die Form repeat(2, auto). Andere Texte werden beibehalten, wobei auto nicht in eine numerische Wiederholung umgeschrieben wird.

3. Setzen Sie einen allgemeinen Abstand, wenn Spalten und Zeilen denselben Abstand erhalten sollen. Ein gesetzter Wert wird mit px ausgegeben. Lassen Sie den Wert weg oder verwenden Sie einen falsy Wert, entsteht keine allgemeine gap-Deklaration.

4. Ergänzen Sie bei Bedarf getrennte Werte für Spalten- und Zeilenabstand. Jede gesetzte Einzelangabe erzeugt die jeweilige Deklaration mit px; ein nicht gesetzter Wert wird für diese Richtung ausgelassen.

5. Starten Sie die Generierung und lesen Sie den CSS-Code. Ohne eigene Angaben gelten 3 Spalten, auto für die Zeilen, ein allgemeiner Abstand von 10 sowie 0 für beide Einzelabstände.

So lesen Sie das Ergebnis

Prüfen Sie zuerst, ob die Ausgabe display: grid enthält. Danach sehen Sie sich die getrennten Vorlagen für Spalten und Zeilen an. Eine numerische Spaltenangabe ist an der Schreibweise repeat(Zahl, 1fr) zu erkennen, während eine numerische Zeilenangabe als repeat(Zahl, auto) erscheint. Eigene Texte wie 1fr 1fr 1fr werden nicht in diese numerische Form überführt, sondern als Vorlage weitergegeben.

Bei den Abständen ist die Einheit px maßgeblich. Je nach gesetzten Werten kann der Code eine allgemeine gap-Deklaration, einzelne column-gap- und row-gap-Deklarationen oder eine Kombination dieser Angaben enthalten. Ein Wert von 0 für einen Einzelabstand führt nicht zu dessen Deklaration. Vergleichen Sie die ausgegebenen Werte deshalb mit Ihrer Absicht, bevor Sie den Code in ein Layout einfügen.

Praktisches Beispiel

Sie möchten ein dreispaltiges Raster mit automatisch dimensionierten Zeilen und einem einheitlichen Abstand von 10 Pixeln anlegen.

Tragen Sie 3 als Spaltenwert, auto als Zeilenwert und 10 als allgemeinen Abstand ein; starten Sie danach die Generierung.

Der CSS-Code enthält display: grid, repeat(3, 1fr) für die Spalten, auto für die Zeilen und gap: 10px für den allgemeinen Abstand.

Einschränkungen

• Nur Werte aus Ziffern erhalten die beschriebene repeat-Umwandlung. Für andere Spalten- oder Zeilentexte wird keine zusätzliche Prüfung oder Umformung zugesichert.
• Die erzeugten numerischen Abstandswerte verwenden px; eine freie Auswahl anderer Ausgabeeinheiten ist nicht zugesichert.

Häufige Fehler

• Rechnen Sie bei Abstandseingaben nicht mit einer frei gewählten CSS-Einheit. Geben Sie den Wert für die erzeugte Pixelangabe ein; gesetzte Werte erhalten px, während falsy Werte die entsprechende Deklaration auslassen.

Häufige Fragen

Kann ich Zahlen und eigene Spaltenwerte eingeben?

Ja, beide Eingabearten sind vorgesehen. Eine reine Zahl wie 3 erzeugt bei den Spalten eine repeat-Vorlage mit 1fr; eigener Text wie 200px 1fr bleibt unverändert.

Wie verarbeitet der Generator Zeilenwerte?

Bei einer reinen Zahl entsteht eine repeat-Vorlage mit auto. auto selbst und anderer Zeilentext werden als eingegebener Text beibehalten.

Welche Einheit haben die erzeugten Abstände?

Gesetzte Abstandswerte erscheinen mit px. Der allgemeine Wert steuert gap, Einzelwerte steuern column-gap oder row-gap; falsy Werte lassen die jeweilige Deklaration entfallen.