CSS-Grid-Generator
Ein CSS-Grid-Generator lässt Sie ein Raster per Klick bauen, statt Werte zu raten. Spalten, Zeilen, Abstände und Spurgrößen einstellen — der Codebereich schreibt die Regel: Das voreingestellte 3 × 3 Raster ergibt .grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; gap: 16px 16px; } und neun passende divs.
Einstellungen
Item Properties
Vorschau
Generierter Code
Über CSS-Grid-Generator
Das Werkzeug startet mit einem 3 × 3 Raster, 16 Pixel Abstand und allen Spuren auf 1fr. Der Bereich Einstellungen links ändert Spalten und Zeilen, Spalten- und Zeilenabstand und listet dann je Spur ein Textfeld unter Spaltengrößen und Zeilengrößen: Eine Spur kann 1fr, 200px, auto, minmax(200px, 1fr) oder jeden anderen von CSS akzeptierten Wert haben. Der Block Ausrichtung zeigt die vier Container-Eigenschaften — justify-items, align-items, justify-content und align-content — je als stretch, start, center oder end.
Sechs Vorlagen setzen alles auf einmal: Holy Grail (drei Spalten mit 200px, 1fr, 200px über den Zeilen auto, 1fr, auto), Sidebar (250px und 1fr), Dashboard (vier gleiche Spalten über auto, 1fr, 1fr), Gallery (3 × 3 mit 8 Pixel Abstand), Blog (1fr, 2fr, 1fr über auto und 1fr) und Cards (3 × 2 mit 24 Pixel Abstand).
Die Vorschau rechts ist ein echtes CSS-Grid und kein Bild davon, sie fließt also genau wie im Browser um. Jede Zelle ist ein farbiger Block, den ein Klick auswählt; die ausgewählte bekommt eine weiße Kontur, und ihre Spalten- und Zeilenspanne wird bearbeitbar. Der Bereich Generierter Code druckt das Ganze: einen style-Block mit .grid-container, eine .item-N-Regel für jede verschobene Zelle und die HTML-divs. Drei Schaltflächen kopieren das CSS, das HTML oder beides.
Zwei Details lohnen sich: Der Abstand wird mit zwei Werten geschrieben — erst Zeile, dann Spalte —, genau in der Reihenfolge der Kurzschreibweise gap; gap: 16px 24px bedeutet also 16 Pixel zwischen den Zeilen. Und .item-N-Regeln erscheinen nur für Zellen, die Sie verschoben haben: Ein schlichtes Raster erzeugt nur die Container-Regel, was meist genau das ist, was man einfügen will. Nichts wird hochgeladen und nichts zwischen Besuchen gespeichert.
Anwendungsfälle
Anleitung
Beginnen Sie mit einer Vorlage — Holy Grail, Sidebar, Dashboard, Gallery, Blog oder Cards — oder bleiben Sie beim voreingestellten 3 × 3 Raster.
Stellen Sie im Bereich Einstellungen Spalten, Zeilen sowie Spalten- und Zeilenabstand ein.
Bearbeiten Sie die einzelnen Werte unter Spaltengrößen und Zeilengrößen; jedes Feld nimmt jeden CSS-Spurwert, etwa 1fr, 200px oder minmax(200px, 1fr).
Nutzen Sie die Ausrichtungsfelder für justify-items, align-items, justify-content und align-content und klicken Sie einen Block in der Vorschau an, um die Spanne einer Zelle zu ändern.
Lesen Sie den Bereich Generierter Code und drücken Sie CSS kopieren, HTML kopieren oder Alles kopieren.
Übernehmen Sie das Ergebnis aus dem generierten Code – über die Schaltfläche CSS, die Schaltfläche HTML oder „Alles kopieren“ für Markup und Stylesheet zusammen.
Profi-Tipps
- Die Spurfelder nehmen jeden gültigen CSS-Wert und nicht nur Zahlen: minmax(200px, 1fr), auto und min-content funktionieren, weil der Text unverändert in grid-template-columns übernommen wird.
- gap wird als Zeilen- und dann Spaltenabstand gedruckt: gap: 16px 24px sind 16 Pixel zwischen Zeilen und 24 zwischen Spalten. Setzen Sie beide gleich, wenn die Zwei-Wert-Form beim Review verwirrt.
- Nur verschobene Zellen bekommen eine .item-N-Regel; zeigt der Code also nichts außer .grid-container, ist das richtig — die Standardplatzierung braucht kein CSS je Element.
- Ein Klick auf einen Block in der Vorschau wählt ihn aus: Die weiße Kontur zeigt, welche Zelle die Spannenfelder gerade bearbeiten, ein zweiter Klick hebt die Auswahl auf.
- Vorlagen überschreiben Spurgrößen und Abstände: erst die Vorlage anwenden, dann anpassen — nicht umgekehrt.
Fehlerbehebung
Die Vorschau sieht ganz anders aus als meine Seite.
Der Vorschaucontainer ist 100 % breit, mindestens 300 Pixel hoch und sonst ungestylt, während Ihre Seite eigene Breite, Innenabstände und Schrift hat. Fügen Sie den Code in Ihr Layout ein, um dort zu urteilen — die Grid-Eigenschaften sind identisch, nur der Kasten darum ist anders.
Das Ändern der Spaltenzahl hat meine Spannen zurückgesetzt.
Eine geänderte Spalten- oder Zeilenzahl baut die Elementliste neu auf und stellt alles auf die Standardplätze, denn eine Spanne bis Spalte vier ist in einem Dreispalten-Raster sinnlos. Erst die Größe des Rasters festlegen, dann einzelne Zellen anpassen.
Eine Vorlage hat meine eingetippten Spurgrößen gelöscht.
Vorlagen setzen Spalten, Zeilen, alle Spurgrößen und bei Gallery und Cards auch die Abstände. Das ist ihr Zweck. Nehmen Sie die Vorlage als Ausgangspunkt und ändern Sie danach; ein Rückgängig gibt es nicht, kopieren Sie das CSS also vorher heraus, wenn Sie es behalten wollen.
Der Abstand wirkt in einer Richtung falsch.
Die Kurzschreibweise nennt zuerst den Zeilen- und dann den Spaltenabstand: gap: 8px 24px sind 8 Pixel zwischen Zeilen und 24 zwischen Spalten. Wenn sich das verkehrt liest, setzen Sie Spalten- und Zeilenabstand gleich, dann verschwindet die Zweideutigkeit.
Die Kopierschaltflächen tun nichts.
Sie nutzen die Zwischenablage-API des Browsers, die eine sichere Seite und einen echten Klick verlangt und von Erweiterungen blockiert werden kann. Wechselt die Schaltfläche nicht auf das Häkchen, markieren Sie den Code im schwarzen Feld und drücken Strg+C, auf dem Mac Cmd+C.
Häufig gestellte Fragen
display: grid auf den Container setzen, die Spuren mit grid-template-columns und grid-template-rows beschreiben und den Abstand mit gap. Genau das schreibt diese Seite: Die Voreinstellung ergibt .grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; gap: 16px 16px; } und die neun zugehörigen divs.
Ein visueller Editor für die Container-Eigenschaften. Statt grid-template-columns zu tippen und neu zu laden, stellen Sie Spalten, Zeilen, Abstände und Spurgrößen in Feldern ein, sehen ein echtes Raster reagieren und kopieren die fertige Regel. Die Ausgabe ist reines CSS ohne Framework und ohne Klassenkonventionen.
Es ist ein Bruchteil des freien Raums, der nach Abzug fester Spuren und Abstände bleibt. Drei Spalten zu 1fr nehmen je ein Drittel des Rests; 1fr 2fr 1fr gibt der mittleren die Hälfte. Die Vorlage Holy Grail mischt beides: 200px 1fr 200px hält die äußeren Spalten fest und lässt die Mitte den Rest aufnehmen.
Sie lösen verschiedene Aufgaben, statt zu konkurrieren. Grid platziert Elemente gleichzeitig in Zeilen und Spalten — das erzeugt dieses Werkzeug; Flexbox ordnet entlang einer Achse und passt besser zu einer Reihe Schaltflächen oder einer Navigation. Üblich ist Grid für das Gesamtlayout und Flex innerhalb der Zellen.
Ja, und das ist normal. Ein Grid-Kind kann selbst display: flex sein: Die Container-Regel dieser Seite platziert den Block, und eine von Ihnen ergänzte Flex-Regel ordnet dessen Inhalt. Das erzeugte CSS steht dem nicht im Weg, denn .grid-container betrifft nur die Platzierung direkter Kinder.
Über den Block Ausrichtung. justify-items: center zentriert jedes Element waagerecht in seiner Zelle, align-items: center senkrecht; justify-content und align-content verschieben das ganze Raster im Container, wenn die Spuren ihn nicht füllen. Hier eingestellt, erscheinen die Eigenschaften im CSS nur, wenn sie von stretch abweichen.
Den Block in der Vorschau anklicken und sein Spaltenende ändern. Das erzeugte CSS bekommt eine .item-N-Regel mit grid-column: Anfang / Ende nur für diese Zelle — etwa grid-column: 1 / 3 über die ersten beiden Spalten. Unberührte Zellen tauchen im CSS gar nicht auf.
Ja. Grid wird seit Jahren von allen aktuellen großen Browsern unterstützt, und die von diesem Werkzeug geschriebenen Eigenschaften — display, grid-template-columns, grid-template-rows, gap und die vier Ausrichtungseigenschaften — sind die standardisierten, präfixfreien. Für ältere Browser ist ein Flex-Fallback der übliche Weg.
Historisch meinte das die Spaltenklassen eines Frameworks, etwa eine Zwölf-Spalten-Reihe, aus der Seiten gebaut wurden. CSS Grid ersetzt das durch einen Layoutmodus in der Sprache selbst: Statt Klassen hinzuzufügen, deklariert man Spuren. Deshalb hat der hier erzeugte Code eine Containerklasse und gar keine Spaltenklassen.
Der style-Block gehört in Ihr Stylesheet oder ein style-Element, die divs dorthin, wo das Layout erscheinen soll. Die Schaltflächen für CSS und HTML trennen beides, während Alles kopieren style-Block und Markup zusammen liefert — der schnellste Weg, es in einer leeren Datei zu testen.