CSS-Layout: Grid
Mit Flexbox aus L8 bekommst du eindimensionale Anordnungen perfekt hin – also Reihen oder Spalten. Aber für komplette Seiten-Layouts mit Header oben, Sidebar links, Hauptinhalt in der Mitte und Footer unten brauchst du zwei Dimensionen gleichzeitig. Genau dafür ist CSS Grid gemacht.
Grid arbeitet wie ein Schachbrett: du definierst Zeilen und Spalten, und positionierst Elemente in den entstehenden Zellen. Anders als Flexbox planst du das gesamte Raster im Voraus und sagst genau welches Element in welche Zelle (oder welchen Zellbereich) gehört.
1) Grid in zwei Zeilen aktivieren
Wie bei Flexbox brauchst du nur das Eltern-Element zu konfigurieren – seine direkten Kinder werden automatisch zu Grid-Items. Die zwei Pflicht-Eigenschaften:
display: grid;
grid-template-columns: 200px 1fr 100px;
grid-template-rows: 60px auto 40px;
gap: 1rem;
}
Damit hast du ein 3×3-Raster: drei Spalten (200px fix, dann flexibel, dann 100px fix) und drei Zeilen (60px, automatisch, 40px). Kinder-Elemente landen automatisch in der nächsten freien Zelle – oder du sagst ihnen explizit wo sie hingehören.
2) Die fr-Einheit: der Star von Grid
Eine ganz neue Einheit speziell für Grid: fr steht für „fraction" (Anteil). Sie sagt: „verteile den übrigen Platz nach diesen Anteilen". Probier verschiedene Werte – du kannst Pixel, fr, % und auto frei mischen:
1fr 1fr 1fr (drei gleiche Spalten), 1fr 2fr 1fr (mittlere doppelt so breit), 200px 1fr (Sidebar fix + Rest), 100px 1fr 100px (drei Bereiche, Mitte flexibel), repeat(4, 1fr) (4 gleiche Spalten – Kurzschreibweise). Der riesige Vorteil von fr: keine prozentualen Rechnereien mehr! 1fr 2fr 1fr ergibt automatisch 25%/50%/25% – auch wenn die Gesamtbreite sich ändert.3) repeat(), minmax(), auto-fit – die Helfer
Statt jede Spalte einzeln aufzuzählen, gibt es mächtige Funktionen:
- repeat(N, X) – wiederhole.
repeat(4, 1fr)=1fr 1fr 1fr 1fr. - minmax(min, max) – Spalte zwischen min und max.
minmax(150px, 1fr)= mindestens 150px, sonst Rest. - auto-fit – passt Anzahl Spalten an verfügbare Breite an. Bringt Responsive-Design ohne Media-Queries!
- auto-fill – wie auto-fit, lässt aber leere Spalten stehen statt sie zu kollabieren.
Der berühmteste Einzeiler in modernem CSS: grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));. Das bedeutet: so viele Spalten wie Platz da ist, jede mindestens 200px breit, sonst flexibel. Auf Mobile eine Spalte, auf Tablet zwei, auf Desktop vier – alles automatisch, ohne Media Queries. Wenn du nur einen Grid-Trick lernst, dann diesen.
4) Live-Builder: Grid zum Anfassen
Hier kannst du Anzahl der Items, Spalten und Lücken live ändern. Schau wie sich das Grid anpasst:
grid-template-columnsgap5) Items in Zellen platzieren – grid-column und grid-row
Die wahre Power von Grid kommt wenn du einzelne Items über mehrere Zellen spannst. Zähle die Linien deines Rasters: bei 3 Spalten gibt es 4 vertikale Linien (Linien zählen ab 1). Mit grid-column: 1 / 3 sagst du „dieses Item geht von Linie 1 bis Linie 3" – also über zwei Spalten:
grid-row: 1/3
.grid { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); }
.blau { grid-column: 1 / 3; } /* Zelle 1 + 2 */
.lila { grid-column: 3 / 5; grid-row: 1 / 3; } /* 2x2-Block */
.gruen { grid-row: 2 / 4; } /* zwei Zeilen */
.gelb { grid-column: 2 / 4; }
span kannst du auch sagen „strecke dich um N Zellen": grid-column: 1 / span 2 = ab Linie 1, zwei Zellen weit. grid-column: span 2 = irgendwo platzieren, zwei Zellen weit. Negative Linien-Nummern zählen von rechts/unten: -1 ist die letzte Linie. grid-column: 1 / -1 = ganz von links nach rechts (volle Breite).6) grid-template-areas – Layout mit Worten
Die vielleicht eleganteste Grid-Funktion: du kannst dein Layout direkt mit benannten Bereichen aufzeichnen – fast wie ASCII-Art:
.layout {
display: grid;
grid-template-columns: 200px 1fr 80px;
grid-template-rows: 50px 1fr 40px;
grid-template-areas:
"hd hd hd"
"sb mn ad"
"ft ft ft";
}
/* In den Items: Namen zuweisen */
.header { grid-area: hd; }
.sidebar { grid-area: sb; }
.main { grid-area: mn; }
.ad { grid-area: ad; }
.footer { grid-area: ft; }
. in den Areas markiert eine leere Zelle. Mit Media Queries kannst du das Layout für Mobile anders zeichnen (z.B. alles untereinander) – ohne die HTML-Struktur zu ändern.7) gap, justify-* und align-*
Wie Flexbox hat auch Grid Eigenschaften für Abstände und Ausrichtung. Wichtigste:
- gap – Abstand zwischen Zellen.
gap: 10px 20px= vertikal 10, horizontal 20. - justify-items – horizontale Ausrichtung des Inhalts in jeder Zelle (
start,center,end,stretch). - align-items – vertikale Ausrichtung des Inhalts in jeder Zelle.
- place-items – Shorthand für beides.
place-items: center= perfektes Zentrieren. - justify-content / align-content – wenn das Grid kleiner ist als der Container: wie wird das ganze Raster positioniert.
Einzelne Items können das überschreiben mit justify-self und align-self. Das macht es einfach z.B. einen Footer-Button rechts zu zentrieren während alle anderen links bleiben.
8) Implizites vs. explizites Grid
Was passiert wenn du 12 Items in ein 3×3-Grid wirfst? Grid fügt automatisch neue Zeilen an – das nennt sich implizites Grid. Mit grid-auto-rows: 100px bestimmst du wie hoch die automatisch generierten Zeilen sein sollen. grid-auto-flow: row (Default) füllt Zeile für Zeile, column Spalte für Spalte, dense versucht Lücken zu füllen.
Beispiel: für eine Foto-Gallery mit dynamischer Anzahl kannst du repeat(auto-fill, minmax(200px, 1fr)) für Spalten und grid-auto-rows: 200px für Zeilen kombinieren – das macht eine schöne Kachel-Gallery die sich an jede Breite anpasst.
9) Grid vs. Flexbox – die Entscheidungsfrage
Wann nimmst du was? Hier die klare Trennung:
10) Subgrid – das Grid IM Grid
Eine modernere Erweiterung (seit 2023 breit unterstützt): subgrid. Wenn ein Grid-Item selbst ein Grid wird, kann es das Eltern-Grid mit-erben. Beispiel: drei Karten in einer Zeile sollen alle die gleiche Höhe für Titel, Bild, Beschreibung und Button haben – mit subgrid lassen sich diese Zeilen über die Karten hinweg synchronisieren:
.card {
display: grid;
grid-row: span 4;
grid-template-rows: subgrid; /* erbt die Zeilen vom Eltern-Grid */
}
Zusammenfassung
Grid = zweidimensionales Layout-System. display: grid aktivieren. Spalten/Zeilen definieren mit grid-template-columns/rows. Einheiten: px, fr (Anteil), %, auto. repeat(N, X), minmax(min, max), auto-fit für mächtige Kompositionen. Magie-Einzeiler: repeat(auto-fit, minmax(200px, 1fr)) = responsive ohne Media Queries. Items platzieren: grid-column: 1 / 3 spannt über Zellen. grid-area mit grid-template-areas für visuelle Layout-Definition. gap für Abstände, justify-*/align-* für Ausrichtung. Implizites Grid generiert auto. Grid für Seiten-Layout, Flexbox für Komponenten darin.