CSS Grid Generator
Stelle Spalten, Zeilen und Abstände mit Reglern ein und sieh das Ergebnis live. Kopiere CSS und HTML, bereit zum Einfügen in dein Projekt.
Zu 100 % in deinem Browser verarbeitet
CSS
HTML
Ctrl + Enter ausführenCtrl + C Ergebnis kopieren
So funktioniert es
- 1Passe die Anzahl der Spalten und Zeilen an.
- 2Lege den Abstand zwischen Spalten und Zeilen fest.
- 3Wähle die Spaltenbreite: gleich, fest, automatisch oder responsiv.
- 4Kopiere das erzeugte CSS und HTML.
Anwendungsfälle
- Eine Kartengalerie bauen, die sich der Bildschirmbreite anpasst.
- Das Grundgerüst eines Dashboards aufsetzen.
- Lernen, wie grid-template-columns und gap funktionieren.
- Layouts schnell prototypisieren, bevor du programmierst.
Häufig gestellte Fragen
Was ist CSS Grid?
Ein zweidimensionales CSS-Layoutsystem, das Elemente in Zeilen und Spalten anordnet.
Was macht auto-fit mit minmax?
Es erzeugt so viele Spalten wie bei einer Mindestbreite passen und dehnt sie auf den Platz aus: ideal für responsive Layouts ohne Media Queries.
Was bedeutet 1fr?
Ein Anteil des verfügbaren Platzes. Drei 1fr-Spalten teilen die Breite gleichmäßig.
Funktioniert es in allen Browsern?
Ja, CSS Grid wird von allen modernen Browsern unterstützt.