CSS Grid Layout: Ein praktischer Leitfaden zur Meisterschaft
CSS Grid ermöglicht zweidimensionale Layouts, die früher Hacks brauchten: das Grid-Modell, Platzierungsregeln und Muster statt Float-Layouts.
Vor CSS Grid erforderten zweidimensionale Layouts Floats, Positionierungs-Hacks oder Flexbox-Workarounds. Grid wurde genau dafür entwickelt: Zeilen und Spalten definieren, Elemente in Zellen platzieren und dem Browser die Berechnungen überlassen. Es ist das erste CSS-Layoutsystem, das in beiden Dimensionen gleichzeitig arbeitet.
Ein Grid definieren
Ein Grid-Container erzeugt einen zweidimensionalen Layout-Kontext. Du definierst Spalten und Zeilen am Container; die Kindelemente werden zu Grid Items.
/* ❌ Float-based layout — fragile, requires clearfix hacks */
.container::after {
content: "";
display: table;
clear: both;
}
.sidebar {
float: left;
width: 25%;
}
.main {
float: left;
width: 75%;
}
/* ✅ CSS Grid — explicit, maintainable */
.container {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: auto 1fr auto;
gap: 1rem;
min-height: 100vh;
}Die Einheit 1fr verteilt den verfügbaren Platz proportional. 250px 1fr bedeutet eine feste 250px-Sidebar und einen flexiblen Hauptbereich, der den Rest einnimmt.
Grid Template Areas
Benannte Grid-Bereiche machen komplexe Layouts lesbar, indem sie eine visuelle ASCII-Darstellung auf das tatsächliche Layout abbilden.
.dashboard {
display: grid;
grid-template-columns: 240px 1fr 1fr;
grid-template-rows: 60px 1fr auto;
grid-template-areas:
"header header header"
"sidebar main aside"
"sidebar footer footer";
gap: 1rem;
min-height: 100vh;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }<div class="dashboard">
<header class="header">Navigation</header>
<nav class="sidebar">Menu</nav>
<main class="main">Content</main>
<aside class="aside">Details</aside>
<footer class="footer">Status</footer>
</div>Responsives Grid mit minmax und auto-fit
auto-fit mit minmax() erzeugt responsive Grids ohne Media Queries. Die Elemente brechen automatisch um, je nach verfügbarem Platz.
/* ❌ Fixed column count — breaks on narrow screens */
.card-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1rem;
}
/* ✅ Auto-responsive — cards wrap based on available width */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
/*
auto-fit: create as many columns as fit
minmax(280px, 1fr): each column is at least 280px, at most equal share
Result: 4 columns on wide screen, 2 on tablet, 1 on mobile — no media queries
*/Explizite Platzierung
Grid Items können über Liniennummern oder Span-Direktiven in bestimmte Zellen platziert werden.
/* Place items by grid line numbers */
.featured-article {
grid-column: 1 / 3; /* Span from column line 1 to line 3 (2 columns) */
grid-row: 1 / 2; /* First row */
}
/* Span syntax — more readable for common cases */
.wide-card {
grid-column: span 2; /* Span 2 columns from wherever it's placed */
}
.tall-card {
grid-row: span 2; /* Span 2 rows */
}/* Full magazine-style layout */
.magazine-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 200px);
gap: 1rem;
}
.hero-story {
grid-column: 1 / 3;
grid-row: 1 / 3;
}
.secondary-story {
grid-column: 3 / 5;
grid-row: 1 / 2;
}
.sidebar-story {
grid-column: 3 / 4;
grid-row: 2 / 4;
}Ausrichtung und Zentrierung
Grid bietet Ausrichtungseigenschaften sowohl für die Grid Items innerhalb ihrer Zellen als auch für die Grid-Tracks innerhalb des Containers.
/* Center a single item both horizontally and vertically */
.centered-container {
display: grid;
place-items: center;
min-height: 100vh;
}
/* Align items within their grid cells */
.grid {
display: grid;
grid-template-columns: repeat(3, 200px);
justify-items: center; /* Horizontal alignment of items within cells */
align-items: start; /* Vertical alignment of items within cells */
}
/* Distribute grid tracks within the container */
.grid-centered {
display: grid;
grid-template-columns: repeat(3, 200px);
justify-content: center; /* Center the entire grid horizontally */
align-content: start; /* Align the grid to the top */
gap: 2rem;
}Grid mit Media Queries für komplexe Layouts
auto-fit deckt zwar viele responsive Fälle ab, aber komplexe Layouts brauchen manchmal explizite Grid-Änderungen an den Breakpoints.
.app-layout {
display: grid;
gap: 1rem;
/* Mobile: single column stack */
grid-template-columns: 1fr;
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
}
@media (min-width: 768px) {
.app-layout {
/* Tablet: sidebar becomes a column */
grid-template-columns: 200px 1fr;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}
}
@media (min-width: 1200px) {
.app-layout {
/* Desktop: three-column layout */
grid-template-columns: 240px 1fr 300px;
grid-template-areas:
"header header header"
"sidebar main aside"
"footer footer footer";
}
}Die wichtigsten Erkenntnisse
- Grid arbeitet in zwei Dimensionen — definiere Zeilen und Spalten gleichzeitig und platziere Elemente beliebig im Grid
- Benannte Bereiche erzeugen lesbare Layouts — die ASCII-Art in
grid-template-areasbildet das visuelle Ergebnis direkt ab - auto-fit mit minmax() erzeugt responsive Grids ohne Media Queries — Elemente brechen automatisch je nach Containerbreite um
- Verwende fr-Einheiten für proportionale Größen —
1fr 2frergibt einen Teil und zwei Teile des verfügbaren Platzes - place-items: center ist die einfachste Zentrierung — eine Zeile ersetzt das Flexbox-Zentrierungsmuster
- Kombiniere auto-fit für Karten-Grids und explizite Bereiche für App-Layouts — nutze für jeden Layout-Typ das richtige Werkzeug
