CSS Grid Generator
Was ist CSS Grid?
CSS Grid Layout ist das leistungsfähigste Layoutsystem in CSS. Es ist ein zweidimensionales System, das sowohl Spalten als auch Zeilen verarbeiten kann, im Gegensatz zu Flexbox, das hauptsächlich eindimensional ist.
So verwenden Sie diesen CSS Grid Generator
Grid-Dimensionen festlegen
Verwenden Sie die Seitenleiste, um Spalten, Zeilen und Abstände zu definieren.
Grid-Bereiche definieren
Klicken und ziehen Sie auf der Vorschau, um rechteckige Bereiche auszuwählen.
Einheiten anpassen
Passen Sie Spalten- und Zeilengrößen über die Eingabefelder an.
Vorlage ausprobieren
Wählen Sie aus vorgefertigten Layouts wie Holy Grail, Blog oder Dashboard.
Code generieren
Klicken Sie auf 'Code generieren', um sauberen CSS- und HTML-Code zu exportieren.
CSS Grid Syntax-Leitfaden
Die Kern-Syntax von CSS Grid umfasst Eigenschaften wie grid-template-columns, grid-template-rows und grid-gap. Durch die Verwendung von Bruchteileinheiten (fr) erhalten Sie ein flexibles Layout, das sich perfekt an den Viewport anpasst.
CSS Grid Layout Beispiele
Klassische Beispiele sind das 'Holy Grail'-Layout oder Blog-Seiten mit Sidebar. Dank grid-template-areas können Sie diese Bereiche benennen und im CSS visuell anordnen, was die Wartbarkeit enorm verbessert.