CSS Grid

CSS Grid ist ein Layout-Modell, das auf einem zweidimensionalen Raster basiert. Im Gegensatz zu Flexbox (eindimensional) kann Grid gleichzeitig Zeilen und Spalten kontrollieren. Es eignet sich besonders für Seitenstruktur, Raster und komplexere Layouts.

CSS Grid Anwendungen

Gesamtes Seitenlayout (Header, Sidebar, Content, Footer)
Magazine-Layouts mit überlappenden Bereichen
Bildergalerien mit unterschiedlichen Größen
Dashboard-Layouts
Responsive Grids ohne Media Queries
Komplexe Layouts mit präziser Zeilen- und Spaltenkontrolle

Grid Grundprinzip

Grid ContainerDas Eltern-Element mit display: grid
Grid ItemsDie direkten Kinder des Containers
Grid LinesDie Linien, die das Grid teilen
Grid TracksDie Zeilen und Spalten
Grid CellsDie einzelnen Zellen
Grid AreasBenannte Bereiche aus mehreren Zellen

Grid-Anatomie

Grid Lines (1, 2, 3, 4...)
    ↓   ↓   ↓   ↓
    ┌───┬───┬───┐  ← Grid Line 1
    │ 1 │ 2 │ 3 │  ← Grid Track (Row 1)
    ├───┼───┼───┤  ← Grid Line 2
    │ 4 │ 5 │ 6 │  ← Grid Track (Row 2)
    └───┴───┴───┘  ← Grid Line 3
      ↑   ↑   ↑
Grid Tracks (Columns)

Ein Track ist eine Zeile oder Spalte im Grid.
Ein Item ist das Element, das darin platziert wird.

Grid aktivieren

Sobald ein Eltern-Element display: grid bekommt, wird es zum Grid-Container. Alle direkten Kindelemente werden Grid-Items.

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

Standardverhalten von `display: grid`

Alle Kinder werden zu Grid Items
Items ordnen sich nach definierten Spalten an
Neue Zeilen entstehen automatisch bei Bedarf
Items können präzise platziert werden

Container-Eigenschaften

Diese Eigenschaften werden auf den Grid Container (Eltern-Element) angewendet.

grid-template-columnsDefiniert Anzahl und Breite der Spalten
grid-template-rowsDefiniert Anzahl und Höhe der Zeilen
repeat()Wiederholt Track-Definitionen
minmax()Definiert minimale und maximale Trackgrössen
auto-fit / auto-fillErzeugt responsive Spalten
gapDefiniert Abstände zwischen Zeilen und Spalten
grid-template-areasErstellt benannte Layoutbereiche
grid-auto-rows / grid-auto-columnsDefiniert automatisch erzeugte Tracks
grid-auto-flowSteuert die automatische Platzierung der Grid-Items

1. grid-template-columns

grid-template-columns definiert die Anzahl und Breite der Spalten.

Feste Pixelwerte

200px

grid-template-columns: 200px 200px 200px;

Flexible Einheiten (fr)

fr (fraction) verteilt verfügbaren Raum proportional:

1fr

2fr

1fr

grid-template-columns: 1fr 2fr 1fr;
/* Mittlere Spalte ist doppelt so breit */

Gemischte Werte

200px

1fr

2fr

grid-template-columns: 200px 1fr 2fr;
/* Erste Spalte fest, Rest flexibel */

Weitere Einheiten

/* Prozent */
grid-template-columns: 25% 50% 25%;

/* Auto (passt sich an Inhalt an) */
grid-template-columns: auto 1fr auto;

/* min-content / max-content */
grid-template-columns: min-content 1fr max-content;

/* Viewport-Einheiten */
grid-template-columns: 20vw 1fr 300px;

2. grid-template-rows

Definiert die Anzahl und Höhe der Zeilen – funktioniert wie grid-template-columns.

Zeilen müssen im Grid nicht zwingend manuell angelegt werden. Reichen die definierten Spalten nicht aus, erstellt das Grid-System automatisch neue Zeilen (implizites Grid).

grid-template-rows: 100px 150px 100px;

3. repeat()

Wiederholungen verkürzen den Code. Mit repeat() können mehrere gleich definierte Tracks (Zeilen oder Spalten) automatisch erstellt werden, ohne jede Spur einzeln aufzuschreiben.

/* Statt: */
grid-template-columns: 1fr 1fr 1fr 1fr;

/* Besser: */
grid-template-columns: repeat(4, 1fr);

/* Mit verschiedenen Werten: */
grid-template-columns: repeat(3, 100px 200px);
/* Ergibt: 100px 200px 100px 200px 100px 200px */

4. minmax()

Legt eine minimale und eine maximale Größe für eine Grid-Spur (Track) fest.

grid-template-columns: minmax(200px, 1fr) 2fr;
/* Spalte 1: min 200px, max 1fr */

grid-template-rows: minmax(100px, auto);
/* Zeile: min 100px, wächst mit Inhalt */

5. auto-fit & auto-fill

Beide Werte erzeugen automatisch so viele Spalten, wie in den verfügbaren Platz passen.

auto-fit entfernt leere Spalten und verteilt den Platz.
auto-fill behält leere Spalten bei.

grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
/* Erstellt so viele Spalten wie reinpassen,
   jede min. 150px, max. 1fr */

auto-fit vs auto-fill

/* Meist will man auto-fit: */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

6. gap (grid-gap)

gap erzeugt Abstand zwischen Spalten und Zeilen. Das funktioniert in Grid und Flexbox.

gap: 20px; /* Alle Abstände */

/* Oder getrennt: */
row-gap: 20px;
column-gap: 30px;

/* Kurzform mit zwei Werten: */
gap: 20px 30px; /* row column */

7. grid-template-areas

grid-template-areas macht komplexe Layouts visuell nachvollziehbar, ersetzt jedoch keine semantische HTML-Struktur.

Visual

Titel

Text

.card {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-areas:
        "header header"
        "visual title"
        "visual text"
        "footer footer";
    gap: 10px;
}

.header { grid-area: header; }
.visual { grid-area: visual; }
.title  { grid-area: title; }
.text   { grid-area: text; }
.footer { grid-area: footer; }

Responsive Grid Template Areas

/* Mobile */
.layout {
    grid-template-areas:
        "header"
        "main"
        "sidebar"
        "footer";
}

/* Desktop */
@media (min-width: 768px) {
    .layout {
        grid-template-areas:
            "header header"
            "sidebar main"
            "footer footer";
    }
}

Leere Zellen mit Punkt (.)

grid-template-areas:
    "header header header"
    "sidebar content ."
    "footer footer footer";
/* Rechts oben bleibt leer */

Nurse Grid-Teste deine Grid Template Areas live.

8. grid-auto-rows & grid-auto-columns

grid-auto-rows und grid-auto-columns definieren die Grösse von Zeilen und Spalten, die Grid automatisch erstellt.

Während grid-template-rows und grid-template-columns Zeilen und Spalten des expliziten Grids definieren, legen grid-auto-rows und grid-auto-columns die Grösse der automatisch erzeugten Zeilen und Spalten fest.

.container {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 80px; /* Neue Zeilen werden 80px hoch */
}

9. grid-auto-flow

Kontrolliert, wie Items automatisch platziert werden:

rowZeilenweise füllen (Standard)
columnSpaltenweise füllen
denseLücken auffüllen (dichter packen)

1 span 3

2 span 3

.container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-flow: dense;
    gap: 10px;
}

.wide {
    grid-column: span 3;
}

.small {
    grid-column: span 1;
}

dense erlaubt dem Browser, kleinere Items in frühere Lücken zu setzen.

Item-Eigenschaften

Diese Eigenschaften werden auf Grid Items angewendet.

grid-column positioniert oder überspannt Spalten.
grid-row positioniert oder überspannt Zeilen.
grid-area weist Grid-Items benannten Bereichen zu.
justify-self & align-self richten einzelne Grid-Items innerhalb ihrer Grid-Zelle aus.

1. grid-column & grid-row

grid-column und grid-row positionieren Grid-Items über bestimmte Grid Lines.

 .demo-lines {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 100px);
    gap: 10px;
    }
    
.item-a {
    grid-column: 1 / 3;  /* Von Line 1 bis Line 3 */
    grid-row: 1 / 3;     /* Von Line 1 bis Line 3 */
}

.item-b {
    grid-column: 3 / 5;
    grid-row: 1 / 2;
}

Negative Werte (von rechts/unten)

Negative Grid Lines werden vom Ende des Grids gezählt. -1 bezeichnet die letzte Grid Line.

grid-column: 1 / -1; /* Volle Breite */
grid-row: 2 / -1;    /* Bis zum Ende */

2. span (Überspannen)

Mit span können Grid-Items mehrere Spalten oder Zeilen überspannen.

2 (span 2)

4 (span 3)

.item {
    grid-column: span 2; /* Überspannt 2 Spalten */
}

.full-width {
    grid-column: span 3; /* Überspannt 3 Spalten */
}

/* Oder kombiniert: */
grid-column: 2 / span 3; /* Start bei 2, überspannt 3 */

3. grid-area

grid-area ist die Kurzform für die Platzierung eines Grid-Items oder verweist auf einen benannten Bereich.

grid-area kann auf zwei Arten verwendet werden.

/* Variante 1: Kurzform */
grid-area: 1 / 2 / 3 / 4;
/* row-start / column-start / row-end / column-end */

/* Variante 2: Benannter Bereich */
grid-area: header;
/* Nutzt grid-template-areas vom Container */

4. justify-self & align-self

Mit justify-self und align-self wird ein einzelnes Grid-Item innerhalb seiner Grid-Zelle ausgerichtet.

Eigenschaften

align-selfVertikale Ausrichtung eines einzelnen Grid-Items
justify-selfHorizontale Ausrichtung eines einzelnen Grid-Items
place-selfKurzform für align-self und justify-self

Werte

startAm Anfang der Grid-Zelle ausrichten
endAm Ende der Grid-Zelle ausrichten
centerMittig in der Grid-Zelle ausrichten
stretchFüllt die gesamte Grid-Zelle aus (Standard)

.item {
    align-self: end;      /* vertikal */
    justify-self: center; /* horizontal */
}

/* Kurzform */
    place-self: center;
    place-self: end center; /* align-self justify-self */

Container-Alignment

Richtet alle Grid-Items oder das gesamte Grid aus.

justify-itemsRichtet alle Grid-Items innerhalb ihrer Grid-Zellen horizontal aus.
align-itemsRichtet alle Grid-Items innerhalb ihrer Grid-Zellen vertikal aus.
justify-contentRichtet das gesamte Grid horizontal im Container aus.
align-contentRichtet das gesamte Grid vertikal im Container aus.

1. justify-items & align-items

Richtet alle Grid-Items innerhalb ihrer Grid-Zellen aus.

Eigenschaften

align-itemsVertikale Ausrichtung aller Grid-Items
justify-itemsHorizontale Ausrichtung aller Grid-Items
place-itemsKurzform für align-items und justify-items

Werte

startAm Anfang der Grid-Zelle ausrichten
endAm Ende der Grid-Zelle ausrichten
centerMittig in der Grid-Zelle ausrichten
stretchFüllt die gesamte Grid-Zelle aus (Standard)

.container {
    align-items: center;   /* vertikal */
    justify-items: end;    /* horizontal */
}

/* Kurzform */
place-items: center end; /* align-items justify-items */

Nurse Probier alle Werte live im Alignment Playground aus.

2. justify-content & align-content

Richtet das gesamte Grid innerhalb des Containers aus.

Eigenschaften

align-contentVertikale Ausrichtung des gesamten Grids
justify-contentHorizontale Ausrichtung des gesamten Grids
place-contentKurzform für align-content und justify-content

Werte

startAm Anfang des Containers ausrichten
endAm Ende des Containers ausrichten
centerMittig im Container ausrichten
stretchVerteilt das Grid über den verfügbaren Platz (Standard)
space-betweenVerteilt den freien Platz zwischen den Tracks
space-aroundVerteilt den freien Platz um die Tracks
space-evenlyVerteilt den freien Platz gleichmässig

.container {
    align-content: center;   /* vertikal */
    justify-content: end;    /* horizontal */
}

/* Kurzform */
place-content: center end; /* align-content justify-content */

Nurse Probier alle Werte live im Alignment Playground aus.

Praktische Beispiele

1. Responsive Bildergalerie

Eine responsive Bildergalerie passt die Anzahl der Spalten automatisch an den verfügbaren Platz an. Bilder bleiben übersichtlich angeordnet, ohne dass Media Queries notwendig sind.

Auto-responsive Grid

Ein responsives Grid passt die Anzahl der Spalten automatisch an den verfügbaren Platz an. Die Kacheln ordnen sich ohne Media Queries neu an.

See the Pen Kachel-Version by Intensivstation (@intensivstation) on CodePen.

Responsive Bildergalerie

Das gleiche Prinzip lässt sich für Bildergalerien nutzen. Die Bilder verteilen sich automatisch auf die verfügbare Breite und bleiben gleichmässig angeordnet.

See the Pen Bildergalerie by Intensivstation (@intensivstation) on CodePen.

2. Magazine Layout

Ein Magazin-Layout nutzt unterschiedlich grosse Grid-Bereiche für eine abwechslungsreiche Gestaltung.

See the Pen Magazine Layout by Intensivstation (@intensivstation) on CodePen.

3. Dashboard Layout

Ein Dashboard kombiniert mehrere Bereiche unterschiedlicher Grösse und eignet sich für Admin-Oberflächen, Analyse-Tools oder Kontrollzentren.

See the Pen Dashboard Layout mit Grid by Intensivstation (@intensivstation) on CodePen.

4. Seitenlayout mit Grid

Grid eignet sich ideal für klassische Seitenlayouts mit Header, Navigation, Hauptinhalt, Sidebar und Footer.

See the Pen Seitenlayout mit Grid by Intensivstation (@intensivstation) on CodePen.

5. Grid und Flexbox kombinieren

Ein Nested Layout kombiniert mehrere Layout-Modelle. Grid eignet sich für das Seitenlayout, Flexbox für die Anordnung innerhalb einzelner Bereiche. Beide Layout-Modelle werden häufig gemeinsam eingesetzt.

See the Pen Grid und Flexbox kombinieren by Intensivstation (@intensivstation) on CodePen.

Responsive Grid Strategien

Grid kann responsiv werden, ohne dass jedes Layout mit Media Queries umgebaut werden muss.

1. Auto-responsive ohne Media Queries

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
/* Passt sich automatisch an Bildschirmbreite an */

2. Mit Media Queries

/* Mobile: 1 Spalte */
.grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}

/* Tablet: 2 Spalten */
@media (min-width: 768px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop: 4 Spalten */
@media (min-width: 1200px) {
    .grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

Fortgeschrittene Techniken

1. Benannte Grid Lines

Benannte Grid Lines machen komplexe Grid-Layouts besser lesbar. Statt Grid Lines über Zahlen anzusprechen, können aussagekräftige Namen verwendet werden.

.container {
    display: grid;
    grid-template-columns:
        [sidebar-start] 250px
        [sidebar-end content-start] 1fr
        [content-end];
    gap: 20px;
}

.sidebar {
    grid-column: sidebar-start / sidebar-end;
}

.content {
    grid-column: content-start / content-end;
}

2. Subgrid

subgrid übernimmt die Zeilen oder Spalten eines übergeordneten Grids. Dadurch bleiben verschachtelte Layouts exakt ausgerichtet.

.parent {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.child {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span 3;
}

3. Grid mit clamp()

clamp() ermöglicht flexible Grössen innerhalb eines Grid-Layouts. Dadurch können sich Spalten und Abstände responsiv an verschiedene Bildschirmgrössen anpassen.

.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, 
        minmax(clamp(200px, 30vw, 400px), 1fr)
    );
    gap: clamp(1rem, 2vw, 2rem);
}

4. Aspect Ratio

aspect-ratio legt ein festes Seitenverhältnis für Elemente fest. In Grid-Layouts eignet sich die Eigenschaft besonders für Bildergalerien, Karten und Kacheln mit einheitlichen Proportionen.

.grid-item {
    aspect-ratio: 16 / 9;
}
.gallery img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

Grid vs Flexbox

Beide ergänzen sich perfekt!

GridZweidimensional – Zeilen UND Spalten gleichzeitig
FlexboxEindimensional – Zeile ODER Spalte

Verschachtelung: Grid + Flex zusammen

Ja, das geht! Und ist sogar sehr üblich:

/* Grid für Gesamtlayout */
.page {
    display: grid;
    grid-template-areas:
        "header header"
        "sidebar content";
}

/* Flex innerhalb einer Grid-Zelle */
.header {
    display: flex;
    justify-content: space-between;
}

/* Oder umgekehrt: Flex Container mit Grid Items */
.flex-container {
    display: flex;
}

.flex-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

Regel: Grid für das große Ganze, Flex für Komponenten im Detail.

Grid Cheat Sheet

Container

display: gridAktiviert CSS Grid.
grid-template-columnsDefiniert Anzahl und Breite der Spalten.
grid-template-rowsDefiniert Anzahl und Höhe der Zeilen.
grid-template-areasErstellt benannte Layoutbereiche.
repeat()Wiederholt Track-Definitionen.
minmax()Definiert minimale und maximale Trackgrössen.
auto-fit / auto-fillErzeugt responsive Spalten.
gapDefiniert Abstände zwischen Zeilen und Spalten.
grid-auto-rows / grid-auto-columnsDefiniert automatisch erzeugte Tracks.
grid-auto-flowSteuert die automatische Platzierung der Grid-Items.

Item-Eigenschaften

grid-columnPositioniert oder überspannt Spalten.
grid-rowPositioniert oder überspannt Zeilen.
spanÜberspannt mehrere Zeilen oder Spalten.
grid-areaPositioniert ein Item oder weist es einem benannten Bereich zu.

Alignment

justify-itemsHorizontale Ausrichtung aller Grid-Items.
align-itemsVertikale Ausrichtung aller Grid-Items.
place-itemsKurzform für align-items und justify-items.
justify-contentHorizontale Ausrichtung des gesamten Grids.
align-contentVertikale Ausrichtung des gesamten Grids.
place-contentKurzform für align-content und justify-content.
justify-selfHorizontale Ausrichtung eines einzelnen Grid-Items.
align-selfVertikale Ausrichtung eines einzelnen Grid-Items.
place-selfKurzform für align-self und justify-self.

Nützliche Funktionen

clamp()Ermöglicht flexible Grössen innerhalb eines Grid-Layouts.
aspect-ratioDefiniert ein festes Seitenverhältnis für Elemente.
subgridÜbernimmt Zeilen oder Spalten eines übergeordneten Grids.
Benannte Grid LinesErleichtern die Platzierung komplexer Layouts.

Kurz gesagt

display: grid aktiviert CSS Grid.
grid-template-columns und grid-template-rows definieren das Raster.
fr verteilt den verfügbaren Platz proportional.
repeat() verkürzt wiederkehrende Track-Definitionen.
minmax() definiert minimale und maximale Trackgrössen.
auto-fit und minmax() ermöglichen responsive Layouts ohne Media Queries.
gap definiert Abstände zwischen Zeilen und Spalten.
grid-template-areas erstellt benannte Layoutbereiche.
grid-column, grid-row und span positionieren Grid-Items.
justify-*, align-* und place-* richten Grid-Container und Grid-Items aus.
Grid eignet sich für zweidimensionale Layouts, Flexbox für eindimensionale Komponenten.

Nurse Schau dir auch die Flexbox Lektion an.

Test dein Wissen im CSS GRID GARDEN

CSS Grid

CSS Grid Anwendungen

Grid Grundprinzip

Grid-Anatomie

Grid aktivieren

Standardverhalten von display: grid

Container-Eigenschaften

1. grid-template-columns

Feste Pixelwerte

Flexible Einheiten (fr)

Gemischte Werte

Weitere Einheiten

2. grid-template-rows

3. repeat()

4. minmax()

5. auto-fit & auto-fill

auto-fit vs auto-fill

6. gap (grid-gap)

7. grid-template-areas

Responsive Grid Template Areas

Leere Zellen mit Punkt (.)

8. grid-auto-rows & grid-auto-columns

9. grid-auto-flow

Item-Eigenschaften

1. grid-column & grid-row

Negative Werte (von rechts/unten)

2. span (Überspannen)

3. grid-area

4. justify-self & align-self

Eigenschaften

Werte

Container-Alignment

1. justify-items & align-items

Eigenschaften

Werte

2. justify-content & align-content

Eigenschaften

Werte

Praktische Beispiele

1. Responsive Bildergalerie

Auto-responsive Grid

Responsive Bildergalerie

2. Magazine Layout

3. Dashboard Layout

4. Seitenlayout mit Grid

5. Grid und Flexbox kombinieren

Responsive Grid Strategien

1. Auto-responsive ohne Media Queries

2. Mit Media Queries

Fortgeschrittene Techniken

1. Benannte Grid Lines

2. Subgrid

3. Grid mit clamp()

4. Aspect Ratio

Grid vs Flexbox

Verschachtelung: Grid + Flex zusammen

Grid Cheat Sheet

Container

Item-Eigenschaften

Alignment

Nützliche Funktionen

Kurz gesagt

Standardverhalten von `display: grid`