simple
CSS Grid Generator — simple
Generieren Sie CSS Grid Layout Code visuell.
1
2
3
4
5
6
display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); column-gap: 16px; row-gap: 16px;
How to use CSS Grid Generator
1
Schritt 1: Wählen Sie Ihr Grid Layout
Wählen Sie die Anzahl der Zeilen und Spalten für Ihr Grid Layout. Sie können aus verschiedenen vorgefertigten Templates wählen oder ein Custom Layout von Grund auf erstellen.
2
Schritt 2: Grid Items hinzufügen
Ziehen Sie Grid-Items per Drag-and-Drop auf Ihr Layout, um ein visuell ansprechendes Design zu erstellen. Sie können Größe, Farbe und Position jedes Elements nach Bedarf anpassen.
3
Schritt 4: CSS Code generieren
Sobald du dein Grid-Layout entworfen hast, klicke auf den Button „Generate CSS", um einen benutzerdefinierten CSS-Code zu erhalten, den du in deine HTML-Datei kopieren und einfügen kannst.