CSS Grid Generator
Live-Vorschau
Warum einen visuellen CSS Grid Generator verwenden?
CSS Grid ist das leistungsstärkste Layout-System in CSS, aber seine Syntax — grid-template-columns, grid-template-rows, fr-Einheiten, minmax(), repeat() — hat eine steile Lernkurve. Unser visueller Generator ermöglicht es Ihnen, Ihr Raster über Schieberegler und Dropdowns zu konfigurieren und das Layout sofort zu aktualisieren sehen, damit Sie die Wirkung jeder Eigenschaft verstehen ohne in MDN-Dokumentation zu tauchen.
Live-Raster-Vorschau
Sehen Sie Ihr Raster in Echtzeit aktualisiert wenn Sie Spalten, Zeilen, Abstände und Ausrichtung anpassen
fr-Einheiten-Unterstützung
Templates verwenden Fraktionseinheiten (fr) für flexible, responsive Raster die sich an die Container-Größe anpassen
Fertiger CSS-Output
Exportiert einen sauberen .container CSS-Block mit grid-template-columns, rows, gap und align-items
CSS Grid-Layout erstellen
Spalten und Zeilen festlegen
Schieberegler verwenden um Anzahl der Spalten und Zeilen festzulegen
Template und Abstand wählen
Spalten-Template wählen (gleich, fest+flex, responsive minmax) und Zellen-Abstand anpassen
CSS kopieren
'CSS kopieren' für den vollständigen CSS-Block zum Einfügen in Ihr Stylesheet klicken
CSS Grid-Anwendungsfälle
Seiten-Layouts
Header/Sidebar/Hauptinhalt/Footer-Strukturen sauber mit benannten Grid-Bereichen erstellen
Dashboards
Komplexe Dashboard-Layouts mit unterschiedlich großen Karten via grid-column und grid-row spans erstellen
Bild-Galerien
Mauerwerk- oder gleichmäßige Bild-Galerien mit auto-fill und minmax für Responsivität erstellen
Magazin-Layouts
Redaktionelle Layouts mit asymmetrischen Spalten und Feature-Elementen über mehrere Zellen erstellen
CSS Grid-Best-Practices
✓ fr-Einheiten Prozentangaben vorziehen
Die fr (Fraktion) Einheit verteilt verfügbaren Raum nach festen Spalten, ohne manuell Prozentangaben für flexible Spalten zu berechnen.
✓ minmax() für responsive Raster verwenden
repeat(auto-fill, minmax(250px, 1fr)) erstellt ein responsives Raster das die Spaltenanzahl automatisch anpasst — ohne Media Queries.
✓ Benannte Grid-Bereiche verwenden
grid-template-areas mit benannten Zellen (header, sidebar, main, footer) macht Seiten-Layouts lesbar und einfach zu modifizieren.
✓ auto-fill vs auto-fit verstehen
auto-fill erstellt so viele Tracks wie möglich (lässt leere Tracks). auto-fit verkleinert leere Tracks und erweitert bestehende Elemente — in der Regel besser für Karten-Raster.
❓ Häufig gestellte Fragen
Was ist eine fr-Einheit in CSS Grid?
fr steht für 'Fraktionseinheit'. 1fr repräsentiert einen Bruchteil des verfügbaren freien Raums im Grid-Container. repeat(3, 1fr) erstellt 3 gleiche Spalten die den verfügbaren Raum gleichmäßig teilen.
Wie unterscheidet sich CSS Grid von Flexbox?
Flexbox ist eindimensional — Elemente werden entlang einer Achse (Zeile oder Spalte) angeordnet. CSS Grid ist zweidimensional — es steuert gleichzeitig Zeilen und Spalten, was es für Seiten-Layouts viel leistungsfähiger macht.
Was macht minmax()?
minmax(min, max) definiert einen Größenbereich für einen Grid-Track. minmax(200px, 1fr) bedeutet eine Spalte ist mindestens 200px breit, kann aber wachsen um verfügbaren Raum zu füllen — ideal für responsive Raster.
Wann CSS Grid statt Flexbox verwenden?
Grid für 2D-Layouts verwenden wo Sie gleichzeitige Kontrolle über Zeilen und Spalten brauchen. Flexbox für 1D-Komponenten-Layouts wie Navbars und Formular-Zeilen verwenden. Die meisten modernen Layouts verwenden beide.