CSS-Grid-Generator
CSS Grid visuell konfigurieren: Spalten, Zeilen, Gap und Größen einstellen und fertiges CSS und Tailwind-Klassen kopieren.
Der CSS-Grid-Generator konfiguriert ein Grid visuell: Spalten und Zeilen als feste Anzahl, als responsives auto-fit oder mit eigenen Größen wie 200px 1fr 2fr, dazu Gap, Ausrichtung und Auto-Flow. Einzelne Elemente lassen sich über mehrere Spalten und Zeilen spannen. Der Generator gibt fertigen CSS-Code und Tailwind-Klassen aus.
Element 1
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}Wie funktioniert CSS Grid?
Mit display: grid legst du ein Raster aus Zeilen und Spalten an und platzierst Elemente
darin. Anders als Flexbox arbeitet Grid in zwei Dimensionen gleichzeitig. Das eignet sich für Seitenlayouts,
Galerien, Karten-Raster und Dashboards.
Die wichtigsten Eigenschaften
| Eigenschaft | Wirkung |
|---|---|
grid-template-columns | Definiert Anzahl und Breite der Spalten |
grid-template-rows | Definiert die Zeilen, sonst entstehen sie automatisch |
gap | Abstand zwischen Zeilen und Spalten |
justify-items / align-items | Ausrichtung der Elemente in ihren Zellen |
grid-column / grid-row | Lässt ein Element mehrere Zellen belegen |
So gehst du vor
- Spalten und Zeilen festlegen.
- Elemente anklicken und über mehrere Zellen spannen.
- Code kopieren. Für Inhalte in einer Zeile passt der Flexbox-Playground, für Proportionen der Goldener-Schnitt-Rechner.
Beispiel
Eine responsive Kartengalerie ohne Media Queries: grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) mit gap: 16px. In Tailwind ist das grid grid-cols-[repeat(auto-fit,minmax(160px,1fr))] gap-4.
Häufige Fragen
Was bedeutet 1fr?
fr steht für „fraction“, einen Anteil am verfügbaren Platz. repeat(3, 1fr) erzeugt drei gleich breite Spalten, 1fr 2fr eine schmale und eine doppelt so breite.
Wie mache ich ein Grid ohne Media Queries responsiv?
Mit repeat(auto-fit, minmax(160px, 1fr)). Der Browser passt so viele Spalten wie möglich in die Breite, jede mindestens 160 px und danach gleichmäßig gestreckt. Umbrüche ergeben sich von selbst.
Wann nehme ich Grid statt Flexbox?
Grid eignet sich für zweidimensionale Layouts mit Zeilen und Spalten, Flexbox für eindimensionale Anordnung in einer Richtung. Beide lassen sich kombinieren: Grid für das Seitenlayout, Flexbox für Inhalte in den Zellen.
Was macht grid-auto-flow: dense?
Der Browser füllt Lücken im Raster mit später folgenden, kleineren Elementen auf. Das ergibt dichte Layouts, ändert aber die visuelle Reihenfolge gegenüber dem Quelltext.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.