CSS-Rastergenerator
Kostenloser online-Generator für CSS-Grid-Layouts, visueller Editor
Was ist CSS Grid Layout?
CSS Grid Layout ist ein leistungsstarkes zweidimensionales Layoutsystem, mit dem Sie Elemente gleichzeitig in Zeilen und Spalten anordnen koennen. Im Gegensatz zu Flexbox, das jeweils nur eine Richtung behandelt, gibt Grid Ihnen die volle Kontrolle ueber beide Achsen. Zu den wichtigsten Eigenschaften gehoeren grid-template-columns zum Definieren von Spaltentracks, grid-template-rows fuer Zeilentracks, gap fuer Abstaende und grid-area zum Positionieren von Elementen in benannten Bereichen.
Den Grid-Generator verwenden
Verwenden Sie den Spalten-Slider, um die Anzahl der Spalten (1 bis 12) festzulegen. Verwenden Sie den Zeilen-Slider fuer die Anzahl der Zeilen (1 bis 12). Passen Sie den Gap-Slider an, um den Abstand zwischen Zellen zu steuern (0 bis 32px). Der Vorschaubereich zeigt ein Live-Grid mit nummerierten Zellen. Kopieren Sie den generierten CSS-Code und fuegen Sie ihn in Ihr Projekt ein.
Grid-Eigenschaften verstehen
grid-template-columns und grid-template-rows definieren die Track-Groessen. Die Funktion repeat() erstellt gleiche Tracks, z.B. erzeugt repeat(3, 1fr) drei gleich breite Spalten. Die Einheit fr verteilt den verfuegbaren Platz proportional. gap setzt den Abstand zwischen Zeilen und Spalten. Bei Bedarf koennen Sie unterschiedliche Werte fuer row-gap und column-gap festlegen.
Haeufige Grid-Muster
Holy-Grail-Layout: 3-Spalten-Header mit Hauptinhalt und Sidebar. Dashboard-Karten: repeat(auto-fill, minmax(250px, 1fr)) erstellt responsive Kartenraster. Hero-Bereich ueber volle Breite mit Inhalt darunter: eine Spalte ueber alle Zeilen. Magazin-Layout: gemischte Spans mit grid-column und grid-row fuer unterschiedliche Zellgroessen.
Tipps fuer responsive Grids
Verwenden Sie auto-fill oder auto-fit mit minmax() fuer fluide responsive Grids ohne Media Queries. Kombinieren Sie dies mit clamp() fuer flexible Groessen. Setzen Sie eine Mindestbreite mit minmax(200px, 1fr), damit Elemente nicht zu klein werden. Nutzen Sie Media Queries, um die Spaltenanzahl an Breakpoints zu aendern. Erwaegen Sie Container Queries fuer Komponenten-Level-Responsivitaet.
▶Wann sollte ich Grid statt Flexbox verwenden?
▶Welche Browser unterstuetzen CSS Grid?
▶Kann ich Grids innerhalb von Grids verschachteln?
▶Wie funktionieren Grid-Gaps?
▶Was ist der Unterschied zwischen auto-fill und auto-fit?
▶Wie verwende ich Grid-Areas?
▶Wie mache ich mein Grid responsive?
Wenn dieses Tool Ihnen geholfen hat, zögern Sie nicht, mir einen Kaffee zu kaufen.
Kaufe mir einen Kaffee.