CSS Grid hat meinen Arbeitsablauf bei Seitenlayouts grundlegend verändert. Nicht weil es neu ist – sondern weil es das erste CSS-Werkzeug ist, das wirklich für zweidimensionale Layouts gemacht wurde. Flexbox bleibt für Komponenten, Grid übernimmt das große Bild.
Zwei Achsen statt einer
Flexbox denkt in einer Richtung – entweder Zeile oder Spalte. Grid denkt in beiden gleichzeitig. Das klingt trivial, macht aber einen riesigen Unterschied wenn du ein Layout baust, das Zeilen und Spalten kontrollieren soll.
Ein einfaches Beispiel: drei Spalten, gleich breit, mit Abstand.
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
1fr ist die Einheit, die ich fast überall verwende. Sie verteilt den verfügbaren Platz gleichmäßig – ohne Prozentrechnung, ohne Randbehandlung.
grid-template-areas – Layouts, die man lesen kann
Das ist das Feature, das ich am häufigsten zeige wenn jemand fragt, warum ich Grid statt Flexbox nutze.
.layout {
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
min-height: 100vh;
}
header { grid-area: header; }
aside { grid-area: sidebar; }
main { grid-area: content; }
footer { grid-area: footer; }
Du siehst im CSS direkt, wie das Layout aussieht. Kein gedankliches Umrechnen von grid-column: 1 / 3 – die Struktur liegt offen da. Bei Client-Projekten ist das auch für die Übergabe an andere Entwickler hilfreich.
auto-fill und auto-fit für responsive Gitter
Für Kartenraster – Produktlisten, Teaser-Grids, Portfolio-Übersichten – nutze ich fast immer diese Kombination:
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
}
minmax(280px, 1fr) bedeutet: jede Spalte ist mindestens 280px breit, wächst aber gleichmäßig wenn mehr Platz vorhanden ist. auto-fill legt automatisch fest, wie viele Spalten hineinpassen.
Der Unterschied zu auto-fit: auto-fill behält leere Spalten-Slots bei, auto-fit kollabiert sie. In der Praxis macht das nur einen Unterschied wenn du weniger Items hast als Spalten passen würden – und dann willst du meistens auto-fill.
Responsive ohne Media Queries
Das Beispiel oben ist schon responsiv – ohne eine einzige Media Query. Auf schmalen Viewports passt nur eine Spalte, auf breiten drei oder vier. Das funktioniert weil minmax den Umbruch übernimmt.
Für komplexere Layouts mit einer expliziten Mobilansicht nutze ich dann doch Media Queries – aber deutlich weniger als früher:
.layout {
display: grid;
grid-template-areas:
"header"
"content"
"sidebar"
"footer";
}
@media (min-width: 768px) {
.layout {
grid-template-columns: 1fr 3fr;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
}
}
Mobile zuerst, eine einzige Breakpoint-Änderung, fertig.
Was ich in WordPress-Projekten konkret einsetze
Bei Block-Themes nutze ich Grid direkt im Stylesheet der theme.json-Erweiterungen oder in style.css. Das klassische Zwölf-Spalten-System brauche ich dabei kaum noch – stattdessen definiere ich Grids passend zur jeweiligen Sektion.
Für WooCommerce-Produktarchive überschreibe ich das Standard-Grid mit einem angepassten auto-fill-Raster. Der Core liefert ein einfaches float-basiertes Layout, das ich seit Jahren ersetze:
ul.products {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 2rem;
list-style: none;
padding: 0;
}
Zwei Zeilen CSS, funktioniert auf allen Viewports, kein JavaScript nötig.
Fazit
Grid löst keine Probleme, die sich nicht auch anders lösen ließen. Aber es löst sie lesbarer, wartbarer und meistens auch kürzer. Wer noch hauptsächlich mit verschachtelten Flexbox-Containern arbeitet: es lohnt sich, einen Nachmittag mit Grid zu verbringen.
Die Browser-Unterstützung ist seit Jahren vollständig – kein Grund mehr zu zögern.
