Fortgeschritten402025-01-15

CSS Grid - Der komplette Guide

Meistere CSS Grid von Grund auf. Erstelle komplexe 2D-Layouts mit Grid Template, Areas, Auto-Placement und mehr. Mit praktischen Beispielen!

#css#grid#layout#responsive#css-grid

CSS Grid - Der komplette Guide

CSS Grid ist das mächtigste Layout-System in CSS! Perfekt für zweidimensionale Layouts (Zeilen UND Spalten gleichzeitig).

Grid vs Flexbox

Flexbox = eindimensional (Zeile ODER Spalte)
Grid = zweidimensional (Zeilen UND Spalten)
Grid aktivieren
/* Container zum Grid-Container machen */
.container {
  display: grid;
}

/* HTML */
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

Grid Columns & Rows

grid-template-columns - Spalten definieren

Spalten erstellen
/* 3 Spalten mit festen Breiten */
.grid {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

/* 3 gleich große Spalten */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

/* Unterschiedliche Größen */
.grid {
  display: grid;
  grid-template-columns: 200px 1fr 2fr;
  /* 200px fest, Rest aufgeteilt in 1:2 Verhältnis */
}

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

/* Mix aus festen und flexiblen Größen */
.grid {
  display: grid;
  grid-template-columns: 250px repeat(3, 1fr) 250px;
  /* Sidebar | Content | Sidebar */
}

grid-template-rows - Zeilen definieren

Zeilen erstellen
/* 3 Zeilen mit Höhen */
.grid {
  display: grid;
  grid-template-rows: 100px 200px 100px;
}

/* Auto height */
.grid {
  display: grid;
  grid-template-rows: auto 1fr auto;
  /* Header | Content | Footer */
  height: 100vh;
}

/* repeat() auch für Rows */
.grid {
  display: grid;
  grid-template-rows: repeat(3, 150px);
}

Die fr Einheit

fr = fraction (Bruchteil des verfügbaren Platzes)

fr Einheit verstehen
/* 1fr 1fr = 50% / 50% */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* 1fr 2fr = 33.33% / 66.66% */
.grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

/* Fix + Flexibel */
.grid {
  display: grid;
  grid-template-columns: 250px 1fr;
  /* Sidebar 250px, Rest flexible */
}

/* Mehrere fixe + flexible */
.grid {
  display: grid;
  grid-template-columns: 200px 1fr 1fr 200px;
  /* Sidebar | Content | Content | Sidebar */
}

gap - Abstände

Grid Gap
/* Einheitlicher Abstand */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Unterschiedliche Abstände */
.grid {
  display: grid;
  gap: 20px 40px; /* row-gap / column-gap */
}

/* Oder einzeln */
.grid {
  display: grid;
  row-gap: 20px;
  column-gap: 40px;
}

Grid Lines & Placement

Jede Grid-Linie hat eine Nummer:

    1       2       3       4
1   +-------+-------+-------+
    |       |       |       |
2   +-------+-------+-------+
    |       |       |       |
3   +-------+-------+-------+
Items positionieren mit Lines
/* Item über mehrere Spalten */
.item {
  grid-column-start: 1;
  grid-column-end: 3;
  /* Von Linie 1 bis 3 = 2 Spalten */
}

/* Shorthand */
.item {
  grid-column: 1 / 3;
  /* start / end */
}

/* Über mehrere Zeilen */
.item {
  grid-row: 1 / 3;
  /* Von Zeile 1 bis 3 */
}

/* Beides kombinieren */
.item {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

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

/* Von Start bis Ende */
.item {
  grid-column: 1 / -1; /* Volle Breite! */
}

Grid Template Areas

grid-template-areas erlaubt benannte Bereiche - super intuitiv!

Named Grid Areas
/* Grid definieren */
.grid {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header  header"
    "sidebar content aside"
    "footer  footer  footer";
  gap: 20px;
  height: 100vh;
}

/* Items zuweisen */
.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.aside {
  grid-area: aside;
}

.footer {
  grid-area: footer;
}

/* Visuell: Du siehst das Layout im CSS! */

Leere Zellen mit "."

Leere Grid Cells
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas:
    "header header header header"
    "sidebar content content ."
    "footer footer footer footer";
}

/* "." = leere Zelle */

Auto-Placement

Grid platziert Items automatisch!

Auto-Flow
/* Standard: row (horizontal füllen) */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row;
}
/* Items füllen Zeile für Zeile */

/* column (vertikal füllen) */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: column;
}
/* Items füllen Spalte für Spalte */

/* dense (Lücken füllen) */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: dense;
}
/* Grid versucht Lücken zu füllen */

Implizite vs Explizite Tracks

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

/* Implizit: Mehr Items als Platz? */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 150px;
  /* Neue Zeilen sind automatisch 150px hoch */
}

/* Oder mit minmax */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
  /* Mind. 100px, max. auto (content) */
}

minmax() - Flexible Größen

minmax() für responsive Größen
/* Spalten: min 200px, max 1fr */
.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
}

/* Zeilen: min 100px, max auto */
.grid {
  display: grid;
  grid-auto-rows: minmax(100px, auto);
}

/* Content-basiert */
.grid {
  display: grid;
  grid-template-columns: minmax(min-content, max-content) 1fr;
  /* Erste Spalte: zwischen min und max content */
}

auto-fit vs auto-fill

Automatisch responsive Spalten!

auto-fit vs auto-fill
/* auto-fill: Erstellt so viele Spalten wie möglich */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}
/* Leere Spalten bleiben erhalten */

/* auto-fit: Kollabiert leere Spalten */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}
/* Items wachsen um leeren Platz zu füllen */

/* Perfekt für responsive Card Grids! */

Alignment & Justification

Container Alignment

Grid Container Alignment
/* justify-items - horizontal in Zellen */
.grid {
  display: grid;
  justify-items: start;   /* Links */
  justify-items: end;     /* Rechts */
  justify-items: center;  /* Zentriert */
  justify-items: stretch; /* Volle Breite (Standard) */
}

/* align-items - vertikal in Zellen */
.grid {
  display: grid;
  align-items: start;   /* Oben */
  align-items: end;     /* Unten */
  align-items: center;  /* Zentriert */
  align-items: stretch; /* Volle Höhe (Standard) */
}

/* Shorthand: place-items */
.grid {
  display: grid;
  place-items: center; /* vertikal + horizontal zentriert */
  place-items: center start; /* vertikal center, horizontal start */
}

Grid selbst ausrichten

Grid Content Alignment
/* justify-content - Grid horizontal im Container */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 200px);
  justify-content: start;         /* Links */
  justify-content: end;           /* Rechts */
  justify-content: center;        /* Zentriert */
  justify-content: space-between; /* Abstand zwischen */
  justify-content: space-around;  /* Abstand um herum */
  justify-content: space-evenly;  /* Gleichmäßig */
}

/* align-content - Grid vertikal im Container */
.grid {
  display: grid;
  height: 100vh;
  align-content: start;   /* Oben */
  align-content: center;  /* Zentriert */
  align-content: end;     /* Unten */
}

/* Shorthand */
.grid {
  display: grid;
  place-content: center;
}

Item Alignment

Individual Item Alignment
/* justify-self - Item horizontal */
.item {
  justify-self: start;   /* Links */
  justify-self: end;     /* Rechts */
  justify-self: center;  /* Zentriert */
  justify-self: stretch; /* Volle Breite */
}

/* align-self - Item vertikal */
.item {
  align-self: start;   /* Oben */
  align-self: end;     /* Unten */
  align-self: center;  /* Zentriert */
  align-self: stretch; /* Volle Höhe */
}

/* Shorthand */
.item {
  place-self: center; /* Zentriert in Zelle */
}

Praktische Beispiele

Beispiel 1: Holy Grail Layout

Header, Sidebar, Content, Footer
/* HTML */
<div class="page">
  <header class="header">Header</header>
  <aside class="sidebar">Sidebar</aside>
  <main class="main">Main Content</main>
  <footer class="footer">Footer</footer>
</div>

/* CSS */
.page {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  gap: 20px;
  min-height: 100vh;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

/* Responsive */
@media (max-width: 768px) {
  .page {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "footer";
  }
}

Beispiel 2: Responsive Card Grid

Auto-Responsive Cards
/* HTML */
<div class="card-grid">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
  <!-- ... mehr Cards -->
</div>

/* CSS */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  padding: 2rem;
}

.card {
  padding: 2rem;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Automatisch responsive:
   - Viele Spalten wenn Platz
   - Weniger Spalten bei weniger Platz
   - Keine Media Queries nötig!
*/

Beispiel 3: Magazine Layout

Komplexes Magazin-Layout
/* HTML */
<div class="magazine">
  <article class="featured">Featured Story</article>
  <article class="story">Story 2</article>
  <article class="story">Story 3</article>
  <article class="story">Story 4</article>
  <article class="story">Story 5</article>
</div>

/* CSS */
.magazine {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 20px;
}

/* Featured: 2x2 */
.featured {
  grid-column: span 2;
  grid-row: span 2;
}

/* Normale Stories: 1x1 */
.story {
  /* Auto-Placement */
}

@media (max-width: 768px) {
  .magazine {
    grid-template-columns: 1fr;
  }

  .featured {
    grid-column: span 1;
    grid-row: span 1;
  }
}

Beispiel 4: Dashboard

Dashboard mit verschiedenen Widget-Größen
/* HTML */
<div class="dashboard">
  <div class="widget large">Sales</div>
  <div class="widget">Users</div>
  <div class="widget">Revenue</div>
  <div class="widget wide">Graph</div>
  <div class="widget tall">Activity</div>
  <div class="widget">Tasks</div>
</div>

/* CSS */
.dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-auto-rows: 150px;
  gap: 20px;
}

.widget {
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Verschiedene Größen */
.large {
  grid-column: span 2;
  grid-row: span 2;
}

.wide {
  grid-column: span 2;
}

.tall {
  grid-row: span 2;
}

Beispiel 5: Image Gallery mit Masonry-Effekt

Pinterest-Style Grid
/* HTML */
<div class="gallery">
  <img src="image1.jpg" class="tall">
  <img src="image2.jpg">
  <img src="image3.jpg" class="wide">
  <!-- ... mehr Bilder -->
</div>

/* CSS */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 100px;
  gap: 10px;
}

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

/* Verschiedene Größen */
.tall {
  grid-row: span 3;
}

.wide {
  grid-column: span 2;
}

.large {
  grid-column: span 2;
  grid-row: span 2;
}

Beispiel 6: Form Layout

Responsive Form Grid
/* HTML */
<form class="form-grid">
  <input type="text" placeholder="First Name">
  <input type="text" placeholder="Last Name">
  <input type="email" placeholder="Email" class="full-width">
  <input type="tel" placeholder="Phone">
  <input type="text" placeholder="Company">
  <textarea placeholder="Message" class="full-width"></textarea>
  <button type="submit" class="full-width">Submit</button>
</form>

/* CSS */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.form-grid input,
.form-grid textarea {
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
}

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

textarea {
  min-height: 150px;
  resize: vertical;
}

@media (max-width: 640px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

📝 Quiz

Was ist der Unterschied zwischen auto-fit und auto-fill?

⚡

Tipps & Tricks

Subgrid (neu!)

/* Parent Grid */
.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Child erbt Grid vom Parent */
.child {
  display: grid;
  grid-template-columns: subgrid;
  /* Benutzt die gleichen Spalten wie Parent! */
}

Grid für Centering

/* Einfachstes Centering ever */
.container {
  display: grid;
  place-items: center;
  height: 100vh;
}

/* Item ist perfekt zentriert! */

Negative Line Numbers

.item {
  grid-column: 1 / -1; /* Von Start bis Ende */
  grid-row: 2 / -2;    /* Zweite Zeile bis vorletzte */
}

/* -1 = letzte Linie, -2 = vorletzte, etc. */

Named Lines

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

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

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

Grid + Flexbox kombinieren

/* Grid für 2D Layout */
.page {
  display: grid;
  grid-template-areas:
    "header"
    "main"
    "footer";
}

/* Flexbox für 1D Layout innerhalb */
.header {
  grid-area: header;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
❌

Häufige Fehler

Fehler 1: gap vs margin verwechseln

❌ FALSCH:

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

.item {
  margin: 10px; /* Außen-Abstand! */
}

✅ RICHTIG:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px; /* Abstand zwischen Items */
}

Fehler 2: Height bei align-content vergessen

❌ FALSCH:

.grid {
  display: grid;
  align-content: center; /* Wirkt nicht ohne Height! */
}

✅ RICHTIG:

.grid {
  display: grid;
  align-content: center;
  min-height: 100vh;
}

Fehler 3: grid-template-areas Syntax

❌ FALSCH:

.grid {
  grid-template-areas:
    header header header /* Kein String! */
    sidebar content aside
    footer footer footer;
}

✅ RICHTIG:

.grid {
  grid-template-areas:
    "header header header"   /* Strings! */
    "sidebar content aside"
    "footer footer footer";
}

Fehler 4: fr ohne Platz

❌ FALSCH:

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  /* Container hat keine Breite! */
}

✅ RICHTIG:

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  width: 100%; /* Oder andere Breite */
}
🎯

Zusammenfassung

Du hast gelernt:

  • ✅ Grid = zweidimensionales Layout-System
  • ✅ grid-template-columns/rows - Spalten/Zeilen definieren
  • ✅ fr Einheit - flexible Größen
  • ✅ gap - Abstände zwischen Items
  • ✅ grid-template-areas - benannte Bereiche
  • ✅ grid-column/row - Items positionieren
  • ✅ auto-fit/auto-fill - responsive Spalten
  • ✅ minmax() - flexible Min/Max Größen
  • ✅ Alignment mit justify/align
  • ✅ Praktische Layouts (Holy Grail, Cards, Magazine)

Key Takeaways:

  • Grid = 2D, Flexbox = 1D
  • fr = Bruchteil des verfügbaren Platzes
  • auto-fit + minmax = responsive ohne Media Queries
  • grid-template-areas = visuell und intuitiv
  • 1 / -1 = volle Breite/Höhe
  • place-items: center = perfektes Centering
  • Gap ist besser als Margin

Best Practices:

  • auto-fit + minmax für responsive Grids
  • grid-template-areas für komplexe Layouts
  • fr statt % für flexible Größen
  • gap für Abstände
  • Grid + Flexbox kombinieren
  • Mobile-first Design

Praktische Übungen

Übung 1: Card Grid

Erstelle ein responsive Card Grid:

  • 4 Spalten auf Desktop (über 1200px)
  • 3 Spalten auf Tablet (768px-1200px)
  • 2 Spalten auf Mobile (480px-768px)
  • 1 Spalte auf Small Mobile (unter 480px)
  • Nutze auto-fit/auto-fill!

Übung 2: Dashboard

Baue ein Dashboard mit:

  • Header (volle Breite)
  • Sidebar (feste 250px Breite)
  • Main Content (Rest)
  • 4 Widget-Bereiche im Main
  • Responsive

Übung 3: Magazine Layout

Erstelle ein Magazin-Layout:

  • Featured Article (2x2 Zellen)
  • 6 normale Articles
  • Automatisches Grid
  • Verschiedene Größen

Übung 4: Image Gallery

Baue eine Galerie:

  • Responsive Spalten
  • Verschiedene Bildgrößen
  • Masonry-Effekt
  • Gap zwischen Bildern

Übung 5: Form Layout

Erstelle ein Form Grid:

  • 2 Spalten (First/Last Name)
  • Full-Width Felder (Email, Message)
  • Submit Button (volle Breite)
  • Responsive (1 Spalte auf Mobile)
← CSS•Lektion 16 von 16
100% abgeschlossen
Lektion abgeschlossen!

Gut gemacht! 🎉

Du hast "CSS Grid - Der komplette Guide" abgeschlossen

Vorherige Lektion
CSS Flexbox - Der komplette Guide
Modul abgeschlossen!
Alle Lektionen anzeigen

Artikel bewerten

0.0 (0 Bewertungen)

Bitte einloggen um zu bewerten

Das könnte dich auch interessieren

CSS Flexbox - Der komplette Guide

Meistere CSS Flexbox von Grund auf. Alle Properties, praktische Beispiele und moderne Layouts. Von justify-content bis align-items - alles erklärt!

Fortgeschrittencss

CSS Display & Position - Layout-Grundlagen

Lerne die CSS-Properties display (block, inline, inline-block) und position (static, relative, absolute, fixed, sticky) für modernes Layout.

Anfängercss

CSS Media Queries - Responsive Design

Lerne Media Queries für responsive Webseiten: Breakpoints, mobile-first, min-width/max-width, und responsive Patterns für alle Geräte.

Anfängercss
Zurück zu CSS