Kapitel 13: Fortgeschrittene Praxis

🎯 Lernziele

In diesem Kapitel lernen Sie:

✅ Responsive Grid-Layouts mit Media Queries umsetzen
✅ Grid und Flexbox kombinieren
✅ Komplexe Dashboard-Layouts erstellen
✅ Fortgeschrittene Techniken anwenden

13.1 Responsive Grid-Layouts mit Media Queries

🎯 Ziel

Erstellen Sie ein responsive Grid-Layout, das sich von Desktop zu Mobile anpasst.

📝 Schritt 1: HTML erstellen

html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsives Grid Layout</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <header class="header">
      <h1>Meine Webseite</h1>
      <nav>
        <a href="#">Home</a>
        <a href="#">Über uns</a>
        <a href="#">Kontakt</a>
      </nav>
    </header>
    
    <aside class="sidebar">
      <h3>Sidebar</h3>
      <p>Zusätzliche Informationen</p>
    </aside>
    
    <main class="main">
      <h2>Hauptinhalt</h2>
      <p>Dies ist der Hauptbereich der Webseite.</p>
      <div class="cards">
        <div class="card">Karte 1</div>
        <div class="card">Karte 2</div>
        <div class="card">Karte 3</div>
      </div>
    </main>
    
    <footer class="footer">
      <p>&copy; 2026 Meine Webseite</p>
    </footer>
  </div>
</body>
</html>

📝 Schritt 2: CSS erstellen (Desktop zuerst)

css

/* style.css */

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

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

.container {
  display: grid;
  /* Desktop: 3 Spalten */
  grid-template-columns: 250px 1fr 250px;
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas:
    "header  header  header"
    "nav     nav     nav"
    "sidebar main    ads"
    "footer  footer  footer";
  min-height: 100vh;
  gap: 20px;
  padding: 20px;
}

.header {
  grid-area: header;
  background-color: #2c3e50;
  color: white;
  padding: 30px;
  text-align: center;
  border-radius: 8px;
}

.header nav {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 30px;
}

.header nav a {
  color: white;
  text-decoration: none;
  font-weight: bold;
}

.header nav a:hover {
  color: #3498db;
}

.sidebar {
  grid-area: sidebar;
  background-color: #ecf0f1;
  padding: 20px;
  border-radius: 8px;
}

.main {
  grid-area: main;
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 30px;
}

.card {
  background-color: #3498db;
  color: white;
  padding: 40px;
  text-align: center;
  border-radius: 8px;
  font-size: 20px;
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
}

.ads {
  grid-area: ads;
  background-color: #f39c12;
  padding: 20px;
  color: white;
  border-radius: 8px;
}

.footer {
  grid-area: footer;
  background-color: #2c3e50;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 8px;
}

📝 Schritt 3: Media Queries für Tablet und Mobile

css

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
  .container {
    grid-template-columns: 200px 1fr;
    grid-template-areas:
      "header  header"
      "nav     nav"
      "sidebar main"
      "ads     ads"
      "footer  footer";
  }
}

/* Mobile (< 768px) */
@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "nav"
      "main"
      "sidebar"
      "ads"
      "footer";
  }
  
  .header nav {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }
  
  .cards {
    grid-template-columns: 1fr;
  }
}

🔍 Ergebnis beobachten

Desktop (> 1024px):

┌──────────────────────────────────────────────────┐
│                  header                          │
├──────────────────────────────────────────────────┤
│                   nav                            │
├──────────┬───────────────────┬─────────────────┤
│ sidebar  │      main           │      ads         │
├──────────┴───────────────────┴─────────────────┤
│                  footer                          │
└──────────────────────────────────────────────────┘

Tablet (768px - 1024px):

┌──────────────────────────────────────┐
│             header                   │
├──────────────────────────────────────┤
│              nav                     │
├──────────┬─────────────────────────┤
│ sidebar  │      main                 │
├──────────┴─────────────────────────┤
│             ads                      │
├──────────────────────────────────────┤
│             footer                   │
└──────────────────────────────────────┘

Mobile (< 768px):

┌──────────┐
│  header   │
├──────────┤
│    nav    │
├──────────┤
│   main    │
├──────────┤
│  sidebar  │
├──────────┤
│    ads    │
├──────────┤
│  footer   │
└──────────┘

13.2 Grid und Flexbox kombinieren

🎯 Warum kombinieren?

Grid: Für das Gesamtlayout (große Struktur)
Flexbox: Für Komponenten innerhalb von Grid-Zellen (feinere Ausrichtung)

HTML:

html

<nav class="main-nav">
  <div class="logo">Logo</div>
  <ul class="nav-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">Über uns</a></li>
    <li><a href="#">Kontakt</a></li>
  </ul>
  <div class="cta">
    <button>Anmelden</button>
  </div>
</nav>

CSS:

css

/* Grid für das Gesamtlayout */
.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-areas: "logo nav cta";
  gap: 20px;
  align-items: center;
}

/* Flexbox für die Navigations-Links */
.nav-links {
  display: flex;
  justify-content: center;
  gap: 30px;
  list-style: none;
}

/* Flexbox für den CTA-Bereich */
.cta {
  display: flex;
  justify-content: flex-end;
}

🎨 Visuelle Erklärung

Grid-Layout:
┌──────┬──────────────┬──────────┐
│ logo  │   nav-links    │   cta     │
└──────┴──────────────┴──────────┘

Flexbox innerhalb von nav-links:
┌──────────────┐
│ Home  Über uns  Kontakt │  (flex, justify-content: center)
└──────────────┘

13.3 Komplexe Layouts: Dashboard

🎯 Ziel

Erstellen Sie ein Dashboard-Layout mit Grid.

📝 Schritt 1: HTML erstellen

html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Dashboard Layout</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="dashboard">
    <header class="header">Header</header>
    <nav class="nav">Navigation</nav>
    <aside class="sidebar">Sidebar</aside>
    <main class="main">Main Content</main>
    <div class="widget1">Widget 1</div>
    <div class="widget2">Widget 2</div>
    <div class="widget3">Widget 3</div>
    <footer class="footer">Footer</footer>
  </div>
</body>
</html>

📝 Schritt 2: CSS erstellen

css

/* style.css */

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

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

.dashboard {
  display: grid;
  grid-template-columns: 200px 1fr 1fr 250px;
  grid-template-rows: auto auto 1fr 1fr auto;
  grid-template-areas:
    "header  header  header  header"
    "nav     nav     nav     nav"
    "sidebar main    main    ads"
    "sidebar widget1 widget2 widget3"
    "footer  footer  footer  footer";
  min-height: 100vh;
  gap: 20px;
  padding: 20px;
}

.header {
  grid-area: header;
  background-color: #2c3e50;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 8px;
}

.nav {
  grid-area: nav;
  background-color: #34495e;
  color: white;
  padding: 15px;
  display: flex;
  justify-content: center;
  gap: 30px;
  border-radius: 8px;
}

.sidebar {
  grid-area: sidebar;
  background-color: #ecf0f1;
  padding: 20px;
  border-radius: 8px;
}

.main {
  grid-area: main;
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.widget1 {
  grid-area: widget1;
  background-color: #2ecc71;
  color: white;
  padding: 20px;
  border-radius: 8px;
}

.widget2 {
  grid-area: widget2;
  background-color: #e74c3c;
  color: white;
  padding: 20px;
  border-radius: 8px;
}

.widget3 {
  grid-area: widget3;
  background-color: #f39c12;
  color: white;
  padding: 20px;
  border-radius: 8px;
}

.ads {
  grid-area: ads;
  background-color: #9b59b6;
  color: white;
  padding: 20px;
  border-radius: 8px;
}

.footer {
  grid-area: footer;
  background-color: #2c3e50;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 8px;
}

/* Responsive Anpassung */
@media (max-width: 1024px) {
  .dashboard {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "header  header"
      "nav     nav"
      "main    main"
      "sidebar ads"
      "widget1 widget2"
      "widget3 widget3"
      "footer  footer";
  }
}

@media (max-width: 768px) {
  .dashboard {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "nav"
      "main"
      "sidebar"
      "ads"
      "widget1"
      "widget2"
      "widget3"
      "footer";
  }
  
  .nav {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }
}

🔍 Ergebnis beobachten

Desktop:

┌──────────────────────────────────────────────────┐
│                  header                          │
├──────────────────────────────────────────────────┤
│                   nav                            │
├──────────┬───────────────────┬─────────────────┤
│ sidebar  │      main           │      ads         │
├──────────┼───────────────────┼─────────────────┤
│ widget1  │      widget2       │      widget3     │
├──────────┴───────────────────┴─────────────────┤
│                  footer                          │
└──────────────────────────────────────────────────┘

13.4 Fortgeschrittene Techniken

💡 Technik 1: CSS Grid `subgrid`

Hinweis: subgrid ist eine fortgeschrittene Funktion, die noch nicht von allen Browsern unterstützt wird.

CSS:

css

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

.item {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;  /* Erbt Zeilen vom Elternelement */
}

💡 Technik 2: `masonry` Layout (experimentell)

CSS:

css

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: masonry;  /* Steinmauer-Effekt */
}

Hinweis: Noch nicht standardisiert. Verwenden Sie stattdessen JavaScript-Bibliotheken wie Masonry.js.

💡 Technik 3: Asymmetrische Grids

CSS:

css

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

13.5 Praktische Übung: Portfolio-Website

🎯 Übungsziel

Erstellen Sie eine Portfolio-Website mit Grid-Layout.

📝 Aufgabe

✅ Erstellen Sie ein Grid-Layout mit Header, Projekt-Grid und Footer
✅ Verwenden Sie auto-fit und minmax() für das Projekt-Grid
✅ Machen Sie das Layout responsive mit Media Queries
✅ Kombinieren Sie Grid und Flexbox für die Navigation

💻 Start-Code

HTML:

html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Mein Portfolio</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="portfolio">
    <header class="header">Mein Portfolio</header>
    <main class="projects">
      <div class="project">Projekt 1</div>
      <div class="project">Projekt 2</div>
      <div class="project">Projekt 3</div>
      <div class="project">Projekt 4</div>
      <div class="project">Projekt 5</div>
      <div class="project">Projekt 6</div>
    </main>
    <footer class="footer">© 2026 Mein Portfolio</footer>
  </div>
</body>
</html>

CSS (zu vervollständigen):

css

.portfolio {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: 
    "header"
    "projects"
    "footer";
}

.projects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  padding: 40px 20px;
}

.project {
  background-color: #3498db;
  color: white;
  padding: 60px 20px;
  text-align: center;
  border-radius: 12px;
  font-size: 24px;
  transition: transform 0.3s ease;
}

.project:hover {
  transform: translateY(-10px);
}

📝 Zusammenfassung

In diesem Kapitel haben Sie gelernt:

✅ Responsive Grid-Layouts:

Media Queries verwenden
Von Desktop zu Mobile anpassen

✅ Grid und Flexbox kombinieren:

Grid für Gesamtlayout
Flexbox für Komponenten

✅ Komplexe Layouts:

Dashboard-Layout erstellt
Asymmetrische Grids

✅ Fortgeschrittene Techniken:

subgrid (experimentell)
masonry Layout (experimentell)
Asymmetrische Grids

✅ Praktische Übung:

Portfolio-Website erstellt

🎯 Nächste Schritte

Im nächsten Kapitel lernen Sie:

📖 Häufige Fehler bei Grid Layout vermeiden
🎯 Debugging-Techniken anwenden
🛠️ Best Practices für Grid Layout

👉 Weiter zu Kapitel 14: Häufige Fehler

💡 Tipps für fortgeschrittene Praxis

Mobile-First Ansatz: Beginnen Sie mit Mobile, dann Desktop
Kombinieren Sie Grid und Flexbox: Nutzen Sie die Stärken beider
Testen Sie auf echten Geräten: Browser-DevTools sind gut, echte Geräte sind besser
Verwenden Sie auto-fit und minmax(): Für moderne responsive Grids
Beachten Sie die Browser-Kompatibilität: Prüfen Sie auf Can I Use

Viel Erfolg beim Grid-Lernen! 🚀

Kapitel 13: Fortgeschrittene Praxis ​

🎯 Lernziele ​

13.1 Responsive Grid-Layouts mit Media Queries ​

🎯 Ziel ​

📝 Schritt 1: HTML erstellen ​

📝 Schritt 2: CSS erstellen (Desktop zuerst) ​

📝 Schritt 3: Media Queries für Tablet und Mobile ​

🔍 Ergebnis beobachten ​

13.2 Grid und Flexbox kombinieren ​

🎯 Warum kombinieren? ​

💻 Beispiel: Navigation mit Flexbox innerhalb von Grid ​

🎨 Visuelle Erklärung ​

13.3 Komplexe Layouts: Dashboard ​

🎯 Ziel ​

📝 Schritt 1: HTML erstellen ​

📝 Schritt 2: CSS erstellen ​

🔍 Ergebnis beobachten ​

13.4 Fortgeschrittene Techniken ​

💡 Technik 1: CSS Grid subgrid ​

💡 Technik 2: masonry Layout (experimentell) ​

💡 Technik 3: Asymmetrische Grids ​

13.5 Praktische Übung: Portfolio-Website ​

🎯 Übungsziel ​

📝 Aufgabe ​

💻 Start-Code ​

📝 Zusammenfassung ​

🎯 Nächste Schritte ​

💡 Tipps für fortgeschrittene Praxis ​

Kapitel 13: Fortgeschrittene Praxis

🎯 Lernziele

13.1 Responsive Grid-Layouts mit Media Queries

🎯 Ziel

📝 Schritt 1: HTML erstellen

📝 Schritt 2: CSS erstellen (Desktop zuerst)

📝 Schritt 3: Media Queries für Tablet und Mobile

🔍 Ergebnis beobachten

13.2 Grid und Flexbox kombinieren

🎯 Warum kombinieren?

💻 Beispiel: Navigation mit Flexbox innerhalb von Grid

🎨 Visuelle Erklärung

13.3 Komplexe Layouts: Dashboard

🎯 Ziel

📝 Schritt 1: HTML erstellen

📝 Schritt 2: CSS erstellen

🔍 Ergebnis beobachten

13.4 Fortgeschrittene Techniken

💡 Technik 1: CSS Grid `subgrid`

💡 Technik 2: `masonry` Layout (experimentell)

💡 Technik 3: Asymmetrische Grids

13.5 Praktische Übung: Portfolio-Website

🎯 Übungsziel

📝 Aufgabe

💻 Start-Code

📝 Zusammenfassung

🎯 Nächste Schritte

💡 Tipps für fortgeschrittene Praxis