CSS Grid ist ein zweidimensionales Layout-System für das Web — es erlaubt das gleichzeitige Layout in Zeilen und Spalten. Du definierst einen Grid-Container (das Elternelement) und darin werden Grid-Items positioniert. Grid ist ideal für komplexe Seiten- oder Komponentenlayouts und arbeitet gut mit anderen Modulen (z. B. Flexbox). MDN Web Docs
1. Grundprinzip von CSS Grid
| Begriff | Beschreibung |
|---|---|
| Grid Container | Elternelement, auf das display: grid oder display: inline-grid angewendet wird. |
| Grid Items | Direkte Kinder des Containers – sie werden automatisch Teil des Grids. |
| Grid Tracks | Spalten und Zeilen des Grids (engl. columns und rows). |
| Grid Lines | Linien zwischen den Tracks, nummeriert oder benannt. |
| Grid Areas | Zusammenhängende Bereiche aus mehreren Zellen (per Namen definiert). |
| Explicit Grid | Vom Entwickler explizit definierte Spalten/Zeilen. |
| Implicit Grid | Vom Browser automatisch hinzugefügte Zeilen/Spalten. |
2. Wichtige CSS-Eigenschaften für Grids
| Eigenschaft | Typ | Beschreibung | Beispiel |
|---|---|---|---|
display: grid | Container | Aktiviert das Grid-Layout (Block-Layout). | display: grid; |
display: inline-grid | Container | Wie Grid, aber Inline-Element. | display: inline-grid; |
grid-template-columns | Container | Definiert Spalten (Breiten & Anzahl). | grid-template-columns: 200px 1fr 1fr; |
grid-template-rows | Container | Definiert Zeilen (Höhen & Anzahl). | grid-template-rows: auto 100px 1fr; |
grid-template-areas | Container | Definiert benannte Layoutbereiche. | Siehe Beispiel unten ein . beschreibt einen leeren Bereich |
grid-template | Container | Kurzform für rows, columns, areas. | grid-template: auto 1fr / 200px 1fr; |
grid | Container | Kurzform, kombiniert Templates und Auto-Werte. | grid: auto-flow / 1fr 1fr; |
grid-column-start, grid-column-end | Item | Start-/Endlinie für Spalte. | grid-column: 1 / 3; |
grid-row-start, grid-row-end | Item | Start-/Endlinie für Zeile. | grid-row: 2 / 4; |
grid-area | Item | Name einer Area oder Kurzform für row/column. | grid-area: header; |
grid-auto-rows | Container | Höhe automatisch erzeugter Zeilen. | grid-auto-rows: minmax(100px, auto); |
grid-auto-columns | Container | Breite automatisch erzeugter Spalten. | grid-auto-columns: 200px; |
grid-auto-flow | Container | Steuerung, wie neue Items platziert werden. | grid-auto-flow: row dense; |
gap | Container | Abstand zwischen Zellen (Kurzform). | gap: 10px; |
row-gap / column-gap | Container | Vertikaler / horizontaler Abstand. | row-gap: 20px; |
justify-items | Container | Ausrichtung der Items horizontal (innerhalb Zellen). | justify-items: center; |
align-items | Container | Vertikale Ausrichtung innerhalb Zellen. | align-items: start; |
place-items | Container | Kurzform für align-items / justify-items. | place-items: center; |
justify-content | Container | Ausrichtung des gesamten Grids horizontal. | justify-content: space-between; |
align-content | Container | Ausrichtung des gesamten Grids vertikal. | align-content: space-around; |
place-content | Container | Kurzform für align-content / justify-content. | place-content: center; |
justify-self | Item | Horizontale Ausrichtung eines Items. | justify-self: end; |
align-self | Item | Vertikale Ausrichtung eines Items. | align-self: start; |
minmax(min, max) | Funktion | Definiert min. und max. Größe eines Tracks. | grid-template-columns: minmax(150px, 1fr); |
repeat(n, value) | Funktion | Wiederholt Spalten-/Zeilenmuster. | grid-template-columns: repeat(3, 1fr); |
auto-fit / auto-fill | Funktion | Automatische, responsive Wiederholung von Spalten. | repeat(auto-fill, minmax(200px, 1fr)); |
subgrid | Container (Kind) | Erbt Trackgrößen vom Eltern-Grid (Grid Level 2). | grid-template-rows: subgrid; |
3. Praxis-Beispiele
Einfaches 3-Spalten-Layout:
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* 3 Spalten: 1:2:1 */
gap: 16px; /* Abstand zwischen Zellen */
}
Grid mit benannten Bereichen:
.container {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
gap: 12px;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
4. Tipps & Best Practices
| Tipp | Erklärung |
|---|---|
✅ Verwende gap statt margin zwischen Grid-Items | Sorgt für saubere, konsistente Abstände. |
| ✅ Kombiniere Grid (für Layout) + Flexbox (für Inhalte) | Ideal für komplexe Seitenstrukturen. |
✅ Nutze minmax() und auto-fit für responsive Designs | Flexible Spalten ohne Media Queries. |
⚠️ Vorsicht bei grid-auto-flow: dense | Kann Reihenfolge optisch verändern – nicht immer barrierefrei. |
5. Links
CSS-Tricks: https://css-tricks.com/snippets/css/complete-guide-grid/