CSS-Grid-Generator
Der CSS Grid Generator baut Grid-Layouts aus Spalten- und Zeilenanzahl, Abständen, optionalen eigenen grid-template-Werten und Ausrichtung der Elemente – mit Live-Vorschau und kopierfertigem CSS.
Über dieses Tool
Der CSS Grid Generator baut Grid-Layouts aus Spalten- und Zeilenanzahl, Abständen, optionalen eigenen grid-template-Werten und Ausrichtung der Elemente – mit Live-Vorschau und kopierfertigem CSS.
So funktioniert’s
- Lege die Anzahl der Spalten und Zeilen fest.
- Passe die Spalten- und Zeilenabstände an.
- Gib optional eigene Templates ein, etwa 200px 1fr 1fr.
- Wähle justify-items und align-items und klicke dann auf „CSS kopieren“.
Gut zu wissen
- Die Einheit fr teilt den freien Platz auf: 1fr 2fr macht die zweite Spalte doppelt so breit wie die erste.
- repeat(3, 1fr) ist die Kurzform für drei gleich breite Spalten.
- column-gap und row-gap legen die Abstände zwischen den Spuren fest.
- Grid ist zweidimensional und steuert Zeilen und Spalten gemeinsam.
- repeat(auto-fit, minmax(200px, 1fr)) erzeugt ein responsives Grid ohne Media Queries.
Läuft komplett in deinem Browser – nichts, was du eingibst, wird hochgeladen oder gespeichert.
Häufige Fragen
Wie erstelle ich ein 3-spaltiges Grid in CSS?
Verwende display: grid; grid-template-columns: repeat(3, 1fr); beim Container und füge ein gap für Abstände hinzu.
Was bedeutet fr in CSS Grid?
fr ist ein Bruchteil des verfügbaren freien Platzes im Grid-Container.
CSS Grid oder Flexbox?
Grid eignet sich am besten für zweidimensionale Layouts wie Seitenstrukturen und Karten-Raster, Flexbox für eindimensionale Zeilen oder Spalten.
Wie erstelle ich ein responsives Grid ohne Media Queries?
Verwende grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); – die Spalten brechen dann automatisch um, je nachdem, wie viel Platz vorhanden ist.