CSS-Grid-Generator
Passe grid-template-columns/rows, justify-items, align-items und gap über eine interaktive Oberfläche an und sieh dir echte CSS-Grid-Layouts live in der Vorschau an. Den generierten CSS-Code kannst du mit einem Klick kopieren.
Tipps zur Nutzung
- Die Einheit fr in grid-template-columns: repeat(3, 1fr) steht für einen Anteil am verbleibenden Platz, sodass das Verhältnis der Spalten auch bei sich ändernder Fensterbreite gleich bleibt.
- Die Eigenschaft gap wirkt sich nur auf den Abstand zwischen Zeilen und Spalten aus, anders als margin, das auch den Außenbereich des Grids beeinflusst. Du kannst row-gap und column-gap auch getrennt festlegen.
- Spuren mit dem Wert "auto" passen sich an die tatsächliche Größe ihres Inhalts an – praktisch für Spalten oder Zeilen mit unvorhersehbarer Inhaltslänge.
- Mit einer Überschreibung wie grid-column: span 2 für ein einzelnes Element kannst du zum Beispiel nur den Header oder Footer über die gesamte Breite des Grids strecken.
- Greife zu Grid, wenn du ein vollständig zweidimensionales Layout brauchst, und zu Flexbox, wenn eine einzelne Zeile oder Spalte von Elementen ausreicht (siehe auch unseren CSS-Flexbox-Generator).
Häufig gestellte Fragen
Übrigens – die "zweite Dimension", die CSS Grid anstrebt und Flexbox nicht abdeckt
CSS Grid Layout wurde als zweidimensionales Layoutsystem entworfen, mit dem sich Zeilen und Spalten gleichzeitig definieren lassen – im Gegensatz zu Flexbox, das sich auf die Anordnung von Elementen in einer einzigen Richtung konzentriert. Die Standardisierung beim W3C begann etwa 2011, und nachdem Chrome, Firefox, Safari und Edge 2017 nahezu zeitgleich Unterstützung ausgeliefert hatten, verbreitete sich der Einsatz in realen Projekten schnell.
Bevor es Grid gab, erforderte die Anordnung einer Seite nach der klassischen "Holy-Grail"-Struktur aus Header, Sidebar, Hauptinhalt und Footer komplizierte Umwege über float oder Tabellen-Markup. CSS Grid führte deklarative Eigenschaften wie grid-template-columns, grid-template-rows und grid-template-areas ein, mit denen sich dieses vertraute Layout mit nur einer Handvoll Zeilen CSS nachbauen lässt.
Heute wird ein Großteil der Designarbeit hinter Dashboard-Oberflächen, Bildergalerien und magazinartigen Layouts, die sich um Zeilen und Spalten drehen, mit CSS Grid umgesetzt. Auch die Unterstützung für "Subgrid", mit dem ein verschachteltes Grid die Spurgrößen seines übergeordneten Grids übernehmen kann, hat sich in den wichtigsten Browsern verbreitet und erleichtert es, komplexe, mehrstufige Layouts konsistent zu halten.
In der Praxis hat sich die Konvention etabliert, dass Grid das grundlegende Seitenlayout übernimmt und Flexbox die Anordnung der Elemente innerhalb einzelner Komponenten regelt. Beide sind keine konkurrierenden Technologien, sondern sich ergänzende Werkzeuge mit jeweils unterschiedlichen Stärken (eindimensionale Ausrichtung versus zweidimensionale Rasteranordnung), und die Kombination beider auf einer einzigen Seite gilt als gängige Praxis.