CSS Grid Layout

CSS Grid ist das maechtigste Layout-System in CSS. Waehrend Flexbox fuer eindimensionale Anordnungen gedacht ist, ermoeglicht Grid zweidimensionale Layouts — du kontrollierst Zeilen UND Spalten gleichzeitig.

Grid aktivieren

.container {
    display: grid;
}

Alle direkten Kinder werden automatisch zu Grid-Items.

Spalten und Zeilen definieren

grid-template-columns

/* Drei gleich breite Spalten */
.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

/* Kurzschreibweise mit repeat() */
.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

/* Verschiedene Breiten */
.grid {
    display: grid;
    grid-template-columns: 250px 1fr 300px;
    /* Sidebar | Hauptinhalt | Sidebar */
}

Die fr-Einheit

fr steht fuer fraction (Bruchteil) und verteilt den verfuegbaren Platz:

.grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    /* 1/4  |  2/4  |  1/4 des Platzes */
}

grid-template-rows

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 100px auto 50px;
    /* Header: 100px | Main: automatisch | Footer: 50px */
}

gap: Abstaende

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;              /* Gleicher Abstand ueberall */
    gap: 1rem 2rem;           /* row-gap  column-gap */
}

Items platzieren

grid-column und grid-row

.item {
    grid-column: 1 / 3;  /* Von Linie 1 bis Linie 3 (2 Spalten breit) */
    grid-row: 1 / 2;     /* Von Linie 1 bis Linie 2 (1 Zeile hoch) */
}

/* Kurzschreibweise mit span */
.item {
    grid-column: span 2;  /* 2 Spalten breit */
    grid-row: span 3;     /* 3 Zeilen hoch */
}

Praktisches Beispiel

<div class="grid">
    <header class="header">Header</header>
    <nav class="sidebar">Sidebar</nav>
    <main class="content">Hauptinhalt</main>
    <footer class="footer">Footer</footer>
</div>

.grid {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    gap: 0;
}

.header {
    grid-column: 1 / -1;  /* -1 = letzte Linie (volle Breite) */
}

.sidebar {
    grid-column: 1;
    grid-row: 2;
}

.content {
    grid-column: 2;
    grid-row: 2;
}

.footer {
    grid-column: 1 / -1;  /* Volle Breite */
}

Grid Template Areas

Die eleganteste Methode, Layouts zu definieren:

.grid {
    display: grid;
    grid-template-columns: 250px 1fr 300px;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header  header  header"
        "sidebar content aside"
        "footer  footer  footer";
    min-height: 100vh;
    gap: 1rem;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.aside   { grid-area: aside; }
.footer  { grid-area: footer; }

Das ist wie eine visuelle Karte deines Layouts!

Leere Zellen mit Punkt

.grid {
    grid-template-areas:
        "header  header  header"
        "sidebar content ."       /* Leere Zelle rechts */
        "footer  footer  footer";
}

Responsive Grid mit auto-fit und auto-fill

auto-fill: Spalten automatisch auffuellen

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
}

Die Spalten sind mindestens 250px breit und fuellen den verfuegbaren Platz. Neue Spalten werden automatisch hinzugefuegt oder entfernt!

auto-fit vs. auto-fill

/* auto-fill: Leere Spalten behalten Platz */
.auto-fill {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* auto-fit: Leere Spalten kollabieren, Items dehnen sich */
.auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

Faustregel: Verwende auto-fit wenn du willst, dass die vorhandenen Items den ganzen Platz ausfuellen.

Ausrichtung im Grid

Items im Grid-Container ausrichten

.grid {
    display: grid;
    grid-template-columns: repeat(3, 200px);

    /* Horizontale Ausrichtung aller Items */
    justify-items: start;    /* Links */
    justify-items: center;   /* Zentriert */
    justify-items: end;      /* Rechts */
    justify-items: stretch;  /* Dehnen (Standard) */

    /* Vertikale Ausrichtung aller Items */
    align-items: start;
    align-items: center;
    align-items: end;
    align-items: stretch;

    /* Kurzschreibweise */
    place-items: center;  /* Horizontal und vertikal zentriert */
}

Das gesamte Grid im Container ausrichten

.grid {
    display: grid;
    grid-template-columns: repeat(3, 200px);
    height: 500px;

    /* Grid horizontal im Container */
    justify-content: center;
    justify-content: space-between;

    /* Grid vertikal im Container */
    align-content: center;

    /* Kurzschreibweise */
    place-content: center;
}

Einzelne Items ausrichten

.special-item {
    justify-self: center;
    align-self: end;
    /* oder: place-self: center end; */
}

Implizites vs. Explizites Grid

.grid {
    display: grid;
    /* Explizit: 3 Spalten definiert */
    grid-template-columns: repeat(3, 1fr);

    /* Implizit: Automatische Zeilen fuer uebrige Items */
    grid-auto-rows: minmax(100px, auto);

    /* Automatische Spalten */
    grid-auto-columns: 200px;

    /* Fliessrichtung fuer automatische Platzierung */
    grid-auto-flow: row;     /* Zeilenweise (Standard) */
    grid-auto-flow: column;  /* Spaltenweise */
    grid-auto-flow: dense;   /* Luecken fuellen */
}

Praktische Grid-Layouts

1. Bildergalerie

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.5rem;
}

.gallery img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 8px;
}

/* Besonderes Bild ueber 2 Spalten und 2 Zeilen */
.gallery .featured {
    grid-column: span 2;
    grid-row: span 2;
}

.gallery .featured img {
    height: 100%;
}

2. Dashboard-Layout

.dashboard {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: 60px 1fr;
    grid-template-areas:
        "nav    header"
        "nav    main";
    min-height: 100vh;
}

.dashboard-header { grid-area: header; }
.dashboard-nav    { grid-area: nav; }
.dashboard-main   { grid-area: main; }

.dashboard-main {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    padding: 1.5rem;
}

3. Blog-Layout

.blog-layout {
    display: grid;
    grid-template-columns: 1fr min(65ch, 100%) 1fr;
    /* Zentrierter Inhalt mit maximaler Lesebreite */
}

.blog-layout > * {
    grid-column: 2;
}

/* Volle Breite fuer bestimmte Elemente */
.blog-layout > .full-width {
    grid-column: 1 / -1;
}

Grid vs. Flexbox: Wann was?

Kriterium	Flexbox	Grid
Dimension	1D (Zeile oder Spalte)	2D (Zeilen und Spalten)
Inhalt bestimmt Layout	Ja	Nein
Layout bestimmt Inhalt	Nein	Ja
Ideal fuer	Navigation, Toolbars, Cards in einer Reihe	Seitenlayouts, Galerien, Dashboards
Umbruch	flex-wrap	auto-fit/auto-fill

In der Praxis: Kombiniere beide! Grid fuer das Seitenlayout, Flexbox fuer Komponenten innerhalb des Grids.

Uebungen

Uebung 1: Responsive Galerie

Erstelle eine Bildergalerie mit auto-fit und minmax(). Die Bilder sollen sich automatisch anpassen — 4 Spalten auf dem Desktop, 2 auf dem Tablet, 1 auf dem Handy.

Uebung 2: Dashboard

Erstelle ein Dashboard-Layout mit grid-template-areas:

• Fixierte Sidebar links
• Header oben
• Hauptbereich mit Karten im Grid

Uebung 3: Magazin-Layout

Erstelle ein Magazin-artiges Layout, bei dem manche Artikel 2 Spalten und manche 2 Zeilen einnehmen.

Was kommt als Naechstes?

Im naechsten Kapitel setzen wir das Gelernte in die Praxis um — Layouts in der Praxis:

• Reale Webseiten-Layouts nachbauen
• Flexbox und Grid kombinieren
• Responsive Patterns

Zusammenfassung

• CSS Grid ist ideal fuer zweidimensionale Layouts (Zeilen und Spalten)
• grid-template-columns und grid-template-rows definieren die Struktur
• Die fr-Einheit verteilt verfuegbaren Platz flexibel
• grid-template-areas erstellt visuelle Layout-Karten
• auto-fit mit minmax() macht Grids automatisch responsive
• place-items: center zentriert alles in einer Zeile
• Grid und Flexbox ergaenzen sich — verwende beide!

---