⏱️2 min read · 356 words
CSS-Rasterist das leistungsstärkste Layoutsystem in CSS. Im Jahr 2026 liegt die Browserunterstützung bei über 99 % und CSS Grid wird für alles verwendet, von Layouts auf Seitenebene bis hin zu komplexen Kartenrastern und Dashboards. Dieser Leitfaden behandelt Grid von den Grundlagen bis hin zu fortgeschrittenen Mustern.
📋 Table of Contents
Grid-Grundlagen
/* Enable grid */
.container {
display: grid;
/* 3 equal columns */
grid-template-columns: 1fr 1fr 1fr;
/* Or shorthand */
grid-template-columns: repeat(3, 1fr);
/* Rows */
grid-template-rows: auto 1fr auto;
/* Gap between cells */
gap: 1rem;
}<div class="container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
<div>Item 6</div>
</div>Rastervorlagenbereiche (semantisches Layout)
.page {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 250px 1fr;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
gap: 1rem;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }Spalten- und zeilenübergreifend
.featured {
grid-column: 1 / 3; /* span 2 columns */
/* or: */
grid-column: span 2;
}
.hero {
grid-row: 1 / 3; /* span 2 rows */
}
.full-width {
grid-column: 1 / -1; /* span all columns */
}Automatisches Ausfüllen und automatisches Anpassen (responsives Raster)
/* Cards that auto-wrap: minimum 280px, fill available space */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
}
/* auto-fill: keeps empty column tracks
auto-fit: collapses empty tracks */
.card-grid-fit {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}Benannte Gitterlinien
.layout {
display: grid;
grid-template-columns:
[full-start] 1rem
[content-start] 1fr
[content-end] 1rem
[full-end];
}
.bleed-full {
grid-column: full-start / full-end;
}
.content {
grid-column: content-start / content-end;
}Grid vs. Flexbox: Wann sollte welches verwendet werden
- CSS-Raster:Zweidimensionale Layouts (Zeilen UND Spalten), Seitenstruktur, Dashboards, komplexe Kartenlayouts
- Flexbox:Eindimensional (Zeile ODER Spalte), Navigationsleisten, Schaltflächengruppen, Inhalt zentrieren
- Beides zusammen:Raster für Seitenlayout, Flexbox für Elemente innerhalb von Rasterzellen
Responsives Raster ohne Medienabfragen
/* Works at any viewport width — no breakpoints needed */
.responsive-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
gap: 1rem;
}Fazit
CSS Grid ist eine der leistungsstärksten Ergänzungen zu CSS. Verwenden Siegrid-template-areasfür das semantische Seitenlayoutrepeat(auto-fill, minmax(...))für reaktionsfähige Kartenraster und benannte Zeilen für komplexe redaktionelle Layouts. In Kombination mit Flexbox können Sie jedes Layout ohne CSS-Framework erstellen.
🔗 Share this article
✍️ Leave a Comment