Kapitel 17: Erweiterte Themen

🎯 Lernziele

In diesem Kapitel lernen Sie:

✅ CSS Grid subgrid verwenden
✅ masonry Layout mit Grid simulieren
✅ CSS Container Queries mit Grid kombinieren
✅ Fortgeschrittene Layout-Techniken

17.1 CSS Grid `subgrid`

📖 Definition

subgrid erlaubt einem verschachtelten Grid, die Spalten/Zeilen seines Elternelements zu übernehmen.

⚠️ Wichtig

subgrid wird derzeit (2026) nur von Firefox vollständig unterstützt. Chrome und Safari sind in der Entwicklung.

💻 Syntax

Eltern-Grid:

css

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

Kind-Grid (subgrid):

css

.child {
  display: grid;
  grid-columns: subgrid;  /* Übernimmt Spalten vom Eltern-Grid */
  grid-rows: subgrid;     /* Übernimmt Zeilen vom Eltern-Grid */
  grid-column: 1 / -1;    /* Spannt über alle Spalten */
  grid-row: 1 / -1;       /* Spannt über alle Zeilen */
}

💻 Beispiel

HTML:

html

<div class="parent">
  <div class="child">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</div>

CSS:

css

.parent {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(2, 100px);
  gap: 10px;
  background-color: #f0f0f0;
  padding: 20px;
}

.child {
  display: grid;
  grid-columns: subgrid;
  grid-rows: subgrid;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  gap: 10px;
}

.item {
  background-color: #3498db;
  color: white;
  padding: 20px;
  text-align: center;
}

🔍 Ergebnis beobachten

Was passiert ist:

✅ .parent ist ein Grid mit 3 Spalten und 2 Zeilen
✅ .child verwendet dieselben Spalten und Zeilen wie .parent
✅ Elemente innerhalb von .child richten sich nach dem Eltern-Grid aus

🔑 Browser-Kompatibilität

Browser	Status
Firefox	✅ Vollständig unterstützt
Chrome	🔄 In Entwicklung
Safari	🔄 In Entwicklung
Edge	🔄 In Entwicklung

Fallback für Browser ohne subgrid Unterstützung:

css

/* Fallback: Manuell Spalten/Zeilen definieren */
.child {
  display: grid;
  grid-template-columns: repeat(3, 100px);  /* Muss manuell angepasst werden */
  grid-template-rows: repeat(2, 100px);
}

17.2 `masonry` Layout mit Grid simulieren

📖 Was ist Masonry Layout?

Masonry Layout (wie bei Pinterest) ordnet Elemente so an, dass sie vertikal so wenig Leerraum wie möglich lassen.

⚠️ Wichtig

CSS Grid hat kein natives masonry Schlüsselwort (noch nicht standardisiert). Aber wir können es simulieren!

💡 Methode 1: `grid-auto-flow: dense`

CSS:

css

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;  /* Feste Zeilenhöhe */
  grid-auto-flow: dense;     /* Füllt Lücken auf */
  gap: 20px;
}

HTML:

html

<div class="container">
  <div class="item item1">1 (2 Zeilen hoch)</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

CSS (für das höhere Element):

css

.item1 {
  grid-row: span 2;  /* Spannt über 2 Zeilen */
}

🔍 Ergebnis

Ohne dense:

┌────┬────┬────┐
│ 1    │ 2    │ 3    │
├────┼────┼────┤
│ 1    │ 4    │ 5    │  ← Lücke bei 4
└────┴────┴────┘

Mit dense:

┌────┬────┬────┐
│ 1    │ 2    │ 3    │
├────┼────┼────┤
│ 1    │ 4    │ 5    │  ← 4 rutscht nach oben
└────┴────┴────┘

💡 Methode 2: JavaScript-Bibliothek verwenden

Für echtes Masonry Layout verwenden Sie besser eine JavaScript-Bibliothek:

Empfehlungen:

Masonry.js: https://masonry.desandro.com/

CSS Columns (einfacher, aber weniger flexibel):

css

.container {
  column-count: 3;
  column-gap: 20px;
}

.item {
  break-inside: avoid;
  margin-bottom: 20px;
}

17.3 CSS Container Queries mit Grid kombinieren

📖 Was sind Container Queries?

Container Queries erlauben es, Styles basierend auf der Größe des Containers (nicht des Viewports) anzupassen.

💻 Syntax

Container definieren:

css

.component {
  container-type: inline-size;
  container-name: my-component;
}

Container Query verwenden:

css

@container my-component (min-width: 400px) {
  .component-grid {
    grid-template-columns: 1fr 1fr;  /* 2 Spalten ab 400px Containerbreite */
  }
}

💻 Beispiel

HTML:

html

<div class="component">
  <div class="component-grid">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>
</div>

CSS:

css

.component {
  container-type: inline-size;
  container-name: component;
  background-color: #f0f0f0;
  padding: 20px;
}

.component-grid {
  display: grid;
  grid-template-columns: 1fr;  /* Standard: 1 Spalte */
  gap: 20px;
}

/* Wenn Container ≥ 400px breit ist */
@container component (min-width: 400px) {
  .component-grid {
    grid-template-columns: 1fr 1fr;  /* 2 Spalten */
  }
}

/* Wenn Container ≥ 600px breit ist */
@container component (min-width: 600px) {
  .component-grid {
    grid-template-columns: 1fr 1fr 1fr;  /* 3 Spalten */
  }
}

.item {
  background-color: #3498db;
  color: white;
  padding: 40px;
  text-align: center;
}

🔍 Ergebnis

Container < 400px:

┌──────────┐
│     1     │
├──────────┤
│     2     │
├──────────┤
│     3     │
├──────────┤
│     4     │
└──────────┘

Container 400px - 599px:

┌──────────┬──────────┐
│     1     │     2     │
├──────────┼──────────┤
│     3     │     4     │
└──────────┴──────────┘

Container ≥ 600px:

┌──────────┬──────────┬──────────┐
│     1     │     2     │     3     │
├──────────┼──────────┼──────────┤
│     4     │ (leer)   │ (leer)   │
└──────────┴──────────┴──────────┘

17.4 Fortgeschrittene Layout-Techniken

💡 Technik 1: Asymmetrische Grids

CSS:

css

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;  /* Mittlere Spalte doppelt so breit */
  grid-template-rows: auto 300px auto;
  gap: 20px;
}

Visuelles Ergebnis:

┌──────────┬──────────────────┬──────────┐
│          │                   │          │
│ Spalte 1 │   Spalte 2 (2x)  │ Spalte 3 │
│          │                   │          │
└──────────┴──────────────────┴──────────┘

💡 Technik 2: Overlapping Elements

CSS:

css

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 200px 200px;
}

.item1 {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  z-index: 1;  /* Liegt oben */
}

.item2 {
  grid-column: 1 / 3;  /* Spannt über 2 Spalten */
  grid-row: 1 / 2;
  z-index: 0;  /* Liegt unten */
}

💡 Technik 3: Named Grid Lines

CSS:

css

.container {
  grid-template-columns: [sidebar-start] 250px [sidebar-end main-start] 1fr [main-end];
  grid-template-rows: [header-start] auto [header-end content-start] 1fr [content-end footer-start] auto [footer-end];
}

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

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

Vorteile:

✅ Lesbarer Code
✅ Wartbarer (wenn Spalten hinzugefügt werden)

17.5 Praktische Übung: Moderne Grid-Techniken

🎯 Übungsziel

Erstellen Sie ein Layout mit subgrid (oder Fallback) und Container Queries.

📝 Schritt 1: HTML erstellen

html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Moderne Grid Techniken</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="parent">
      <div class="child">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
      </div>
    </div>
    
    <div class="component">
      <div class="component-grid">
        <div class="item">A</div>
        <div class="item">B</div>
        <div class="item">C</div>
        <div class="item">D</div>
      </div>
    </div>
  </div>
</body>
</html>

📝 Schritt 2: CSS erstellen

css

/* style.css */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  padding: 20px;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Parent Grid */
.parent {
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 8px;
}

.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  gap: 10px;
}

/* Child Grid (subgrid) */
.child {
  display: grid;
  /* Fallback für Browser ohne subgrid */
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  gap: 10px;
  
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}

/* Moderne Browser mit subgrid Unterstützung */
@supports (grid-template-columns: subgrid) {
  .child {
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
  }
}

.item {
  background-color: #3498db;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 8px;
}

/* Component mit Container Query */
.component {
  container-type: inline-size;
  container-name: component;
  background-color: #ecf0f1;
  padding: 20px;
  border-radius: 8px;
}

.component-grid {
  display: grid;
  grid-template-columns: 1fr;  /* Standard: 1 Spalte */
  gap: 20px;
}

/* Wenn Container ≥ 400px breit ist */
@container component (min-width: 400px) {
  .component-grid {
    grid-template-columns: 1fr 1fr;  /* 2 Spalten */
  }
}

/* Wenn Container ≥ 600px breit ist */
@container component (min-width: 600px) {
  .component-grid {
    grid-template-columns: 1fr 1fr 1fr;  /* 3 Spalten */
  }
}

/* Responsive Anpassung für Mobile */
@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;  /* Eine Spalte auf Mobile */
  }
}

🔍 Schritt 3: Ergebnis beobachten

Was passiert ist:

✅ .parent ist ein Grid mit 3 Spalten und 2 Zeilen
✅ .child verwendet (falls unterstützt) subgrid
✅ .component passt sich basierend auf Containerbreite an (nicht Viewport!)
✅ Auf Mobile wird alles untereinander angeordnet

17.6 Häufige Fehler bei fortgeschrittenen Techniken

❌ Fehler 1: `subgrid` wird nicht unterstützt

Problem: subgrid funktioniert nicht in Chrome/Safari.

Lösung:

css

/* Fallback für Browser ohne subgrid */
.child {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* Muss manuell angepasst werden */
}

/* Moderne Browser mit subgrid Unterstützung */
@supports (grid-template-columns: subgrid) {
  .child {
    grid-template-columns: subgrid;
  }
}

❌ Fehler 2: Container Queries werden nicht unterstützt

Problem: Alte Browser unterstützen keine Container Queries.

Lösung:

css

/* Fallback: Media Queries verwenden */
@media (min-width: 400px) {
  .component-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Moderne Browser: Container Queries */
@container component (min-width: 400px) {
  .component-grid {
    grid-template-columns: 1fr 1fr;
  }
}

❌ Fehler 3: `masonry` Layout funktioniert nicht nativ

Problem: CSS Grid hat kein natives masonry Schlüsselwort.

Lösung:

css

/* Simulieren mit grid-auto-flow: dense */
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
  grid-auto-flow: dense;
  gap: 20px;
}

/* Oder JavaScript-Bibliothek verwenden (z.B. Masonry.js) */

📝 Zusammenfassung

In diesem Kapitel haben Sie gelernt:

✅ CSS Grid subgrid:

Spalten/Zeilen vom Elternelement übernehmen
Browser-Kompatibilität beachten
Fallback für alte Browser

✅ masonry Layout simulieren:

grid-auto-flow: dense verwenden
JavaScript-Bibliotheken für echtes Masonry

✅ CSS Container Queries:

Styles basierend auf Containerbreite anpassen
Grid Layout dynamischer machen

✅ Fortgeschrittene Techniken:

Asymmetrische Grids
Overlapping Elements
Named Grid Lines

✅ Praktische Übung:

Moderne Grid-Techniken erstellt

✅ Häufige Fehler:

subgrid Browser-Unterstützung
Container Queries Fallback
masonry Simulation

🎯 Nächste Schritte

Im nächsten Kapitel lernen Sie:

📖 Lernressourcen für Grid Layout
🎯 Online-Übungen und Tools
🛠️ Fortgeschrittene Dokumentation

👉 Weiter zu Kapitel 18: Lernressourcen

💡 Tipps für fortgeschrittene Techniken

Verwenden Sie @supports: Für Feature-Erkennung
Testen Sie in verschiedenen Browsern: Nicht alle Features sind überall verfügbar
Fallback-Strategie: Immer eine Fallback-Lösung haben
Kombinieren Sie Grid und Flexbox: Für beste Ergebnisse
Bleiben Sie auf dem Laufenden: CSS entwickelt sich schnell

Viel Erfolg beim Grid-Lernen! 🚀

Kapitel 17: Erweiterte Themen ​

🎯 Lernziele ​

17.1 CSS Grid subgrid ​

📖 Definition ​

⚠️ Wichtig ​

💻 Syntax ​

💻 Beispiel ​

🔍 Ergebnis beobachten ​

🔑 Browser-Kompatibilität ​

17.2 masonry Layout mit Grid simulieren ​

📖 Was ist Masonry Layout? ​

⚠️ Wichtig ​

💡 Methode 1: grid-auto-flow: dense ​

🔍 Ergebnis ​

💡 Methode 2: JavaScript-Bibliothek verwenden ​

17.3 CSS Container Queries mit Grid kombinieren ​

📖 Was sind Container Queries? ​

💻 Syntax ​

💻 Beispiel ​

🔍 Ergebnis ​

17.4 Fortgeschrittene Layout-Techniken ​

💡 Technik 1: Asymmetrische Grids ​

💡 Technik 2: Overlapping Elements ​

💡 Technik 3: Named Grid Lines ​

17.5 Praktische Übung: Moderne Grid-Techniken ​

🎯 Übungsziel ​

📝 Schritt 1: HTML erstellen ​

📝 Schritt 2: CSS erstellen ​

🔍 Schritt 3: Ergebnis beobachten ​

17.6 Häufige Fehler bei fortgeschrittenen Techniken ​

❌ Fehler 1: subgrid wird nicht unterstützt ​

❌ Fehler 2: Container Queries werden nicht unterstützt ​

❌ Fehler 3: masonry Layout funktioniert nicht nativ ​

📝 Zusammenfassung ​

🎯 Nächste Schritte ​

💡 Tipps für fortgeschrittene Techniken ​

Kapitel 17: Erweiterte Themen

🎯 Lernziele

17.1 CSS Grid `subgrid`

📖 Definition

⚠️ Wichtig

💻 Syntax

💻 Beispiel

🔍 Ergebnis beobachten

🔑 Browser-Kompatibilität

17.2 `masonry` Layout mit Grid simulieren

📖 Was ist Masonry Layout?

⚠️ Wichtig

💡 Methode 1: `grid-auto-flow: dense`

🔍 Ergebnis

💡 Methode 2: JavaScript-Bibliothek verwenden

17.3 CSS Container Queries mit Grid kombinieren

📖 Was sind Container Queries?

💻 Syntax

💻 Beispiel

🔍 Ergebnis

17.4 Fortgeschrittene Layout-Techniken

💡 Technik 1: Asymmetrische Grids

💡 Technik 2: Overlapping Elements

💡 Technik 3: Named Grid Lines

17.5 Praktische Übung: Moderne Grid-Techniken

🎯 Übungsziel

📝 Schritt 1: HTML erstellen

📝 Schritt 2: CSS erstellen

🔍 Schritt 3: Ergebnis beobachten

17.6 Häufige Fehler bei fortgeschrittenen Techniken

❌ Fehler 1: `subgrid` wird nicht unterstützt

❌ Fehler 2: Container Queries werden nicht unterstützt

❌ Fehler 3: `masonry` Layout funktioniert nicht nativ

📝 Zusammenfassung

🎯 Nächste Schritte

💡 Tipps für fortgeschrittene Techniken