Web / CSS

CSS-Grid-Generator

Erstelle einfache, saubere CSS-Grid-Layouts mit Spalten, Reihen, Abständen und responsiven Regeln. Die Vorschau zeigt direkt, wie sich deine Einstellungen auf das Layout auswirken.

Generator

Grid-Layout konfigurieren

Alle Eingaben werden lokal im Browser verarbeitet.

Grundlayout

Container-Klasse Element-Klasse Spaltenmodus Spalten Mindestbreite Reihen Mindesthöhe je Element Vorschau-Elemente

Abstände und Ausrichtung

Reihenabstand Spaltenabstand align-items justify-items align-content justify-content

Responsive Regeln

Breakpoint Spalten unterhalb Breakpoint Ausgabeart

Responsive Regel ausgeben Kommentare einfügen Beispiel-Styling für Elemente ergänzen

Ausgabe

CSS-Code

Bereit.

Wofür ist der CSS-Grid-Generator gedacht?

CSS Grid eignet sich für zweidimensionale Layouts, bei denen Spalten und Reihen gemeinsam gesteuert werden. Das Tool hilft dabei, schnell ein Grundlayout mit passenden Abständen und responsivem Verhalten zu erzeugen.

Die Ausgabe ist bewusst übersichtlich gehalten, damit sie als Startpunkt für Webseiten, Inhaltskarten, Dashboards, Produktlisten oder Dokumentationslayouts genutzt werden kann.