Kapitel 8: Grid-Bereiche und Benennung

🎯 Lernziele

In diesem Kapitel lernen Sie:

✅ grid-template-areas verwenden
✅ grid-area für Elemente setzen
✅ Komplexe Layouts intuitiv erstellen
✅ Responsive Design mit Areas umsetzen

8.1 `grid-template-areas`: Grid-Bereiche definieren

📖 Grundlegende Syntax

css

.container {
  grid-template-areas: 
    "header header header"
    "sidebar main main"
    "footer footer footer";
}

🎨 Visuelle Erklärung

Code:

css

grid-template-areas: 
  "header header header"
  "sidebar main main"
  "footer footer footer";

Visuelles Ergebnis:

┌─────────────────────────────────┐
│          header                 │  ← "header header header"
├────────────┬────────────────────┤
│  sidebar   │      main          │  ← "sidebar main main"
├────────────┴────────────────────┤
│          footer                 │  ← "footer footer footer"
└─────────────────────────────────┘

💻 Wichtige Regeln

✅ Jede Zeile ist eine Zeile im Grid
✅ Jedes in Anführungszeichen stehende Wort ist eine Spalte
✅ Gleiche Namen in derselben Zeile/Spalte verbinden sich zu einem Bereich
✅ Alle Zeilen müssen gleich viele Spalten haben
✅ Bereiche müssen rechteckig sein

💻 Einfaches Beispiel

HTML:

html

<div class="container">
  <header class="header">Header</header>
  <aside class="sidebar">Sidebar</aside>
  <main class="main">Main Content</main>
  <footer class="footer">Footer</footer>
</div>

CSS:

css

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

.header {
  grid-area: header;
  background-color: #2c3e50;
  color: white;
  padding: 20px;
}

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

.main {
  grid-area: main;
  padding: 20px;
}

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

8.2 `grid-area`: Elemente Bereichen zuweisen

📖 Grundlegende Syntax

css

.element {
  grid-area: <Bereichsname>;
}

💻 Beispiel

CSS:

css

.header {
  grid-area: header;  /* Weist diesem Element den Bereich "header" zu */
}

Wichtig: Der Bereichsname muss exakt mit dem Namen in grid-template-areas übereinstimmen!

📊 Zusammenfassung der Schritte

✅ Schritt 1: grid-template-areas im Container definieren
✅ Schritt 2: grid-area bei den Elementen setzen
✅ Schritt 3: Spalten und Zeilen mit grid-template-columns/rows definieren

8.3 Bereiche mit Punkten (`.`) ausblenden

📖 Grundlegende Syntax

Verwenden Sie . (Punkt), um eine Zelle leer zu lassen.

💻 Beispiel

CSS:

css

.container {
  grid-template-areas:
    "header header header"
    ".      main   ."      /* Erste und letzte Spalte leer */
    "footer footer footer";
}

Visuelles Ergebnis:

┌─────────────────────────────────┐
│          header                 │
├────────────┬────────────────────┤
│  (leer)   │      main          │  ← ". main ."
├────────────┴────────────────────┤
│          footer                 │
└─────────────────────────────────┘

8.4 Komplexe Layouts mit `grid-template-areas`

🎯 Beispiel: Dashboard-Layout

HTML:

html

<div class="dashboard">
  <header class="header">Dashboard Header</header>
  <nav class="nav">Navigation</nav>
  <aside class="sidebar">Sidebar</aside>
  <main class="content">Main Content</main>
  <div class="widget1">Widget 1</div>
  <div class="widget2">Widget 2</div>
  <footer class="footer">Footer</footer>
</div>

CSS:

css

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

.header  { grid-area: header;  background-color: #2c3e50; color: white; padding: 20px; }
.nav     { grid-area: nav;     background-color: #3498db; color: white; padding: 20px; }
.sidebar { grid-area: sidebar; background-color: #ecf0f1; padding: 20px; }
.content { grid-area: content; background-color: white; padding: 20px; }
.widget1 { grid-area: widget1; background-color: #2ecc71; color: white; padding: 20px; }
.widget2 { grid-area: widget2; background-color: #e74c3c; color: white; padding: 20px; }
.footer  { grid-area: footer;  background-color: #2c3e50; color: white; padding: 20px; text-align: center; }

Visuelles Ergebnis:

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

8.5 Responsive Design mit `grid-template-areas`

🎯 Beispiel: Vom Desktop zum Mobile

CSS (Desktop):

css

.container {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

CSS (Mobile):

css

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

Visuelles Ergebnis:

Desktop:

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

Mobile:

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

8.6 `grid-area` Kurzschreibweise (Platzierung)

📖 Grundlegende Syntax

grid-area kann auch zur direkten Platzierung verwendet werden:

css

.element {
  grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}

💻 Beispiel

CSS:

css

.item {
  grid-area: 1 / 1 / 3 / 4;  /* Von Zeile 1, Spalte 1 bis Zeile 3, Spalte 4 */
}

Entspricht:

css

.item {
  grid-row: 1 / 3;
  grid-column: 1 / 4;
}

🎯 Anwendungsfall

HTML:

html

<div class="container">
  <div class="header">Header</div>
  <div class="main">Main</div>
</div>

CSS:

css

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 100px 1fr;
}

.header {
  grid-area: 1 / 1 / 2 / 5;  /* Zeile 1, alle 4 Spalten */
  background-color: #2c3e50;
  color: white;
  padding: 20px;
}

.main {
  grid-area: 2 / 1 / 3 / 5;  /* Zeile 2, alle 4 Spalten */
  padding: 20px;
}

8.7 Praktische Übung: Webseiten-Layout erstellen

🎯 Übungsziel

Erstellen Sie ein komplettes Webseiten-Layout mit grid-template-areas.

📝 Schritt 1: HTML erstellen

html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Grid Areas Übung</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <header class="header">
      <h1>Meine Webseite</h1>
    </header>
    
    <nav class="nav">
      <a href="#">Home</a>
      <a href="#">Über uns</a>
      <a href="#">Kontakt</a>
    </nav>
    
    <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>
    </main>
    
    <footer class="footer">
      <p>&copy; 2026 Meine Webseite</p>
    </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;
}

.container {
  display: grid;
  grid-template-columns: 200px 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;
}

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

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

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

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

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

.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;
}

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

🔍 Schritt 3: Ergebnis beobachten

Desktop:

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

Mobile:

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

8.8 Häufige Fehler bei Grid-Bereichen

❌ Fehler 1: Bereichsnamen stimmen nicht überein

Falsch:

css

.container {
  grid-template-areas: "header header";
}

.header {
  grid-area: Header;  /* Großschreibung! Passt nicht! */
}

Richtig:

css

.header {
  grid-area: header;  /* Exakt gleiche Schreibweise! */
}

❌ Fehler 2: Bereiche sind nicht rechteckig

Falsch:

css

.container {
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "sidebar footer main";  /* footer ist nicht rechteckig! */
}

Richtig:

css

.container {
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "sidebar footer footer";  /* footer ist jetzt rechteckig */
}

❌ Fehler 3: Zeilen haben unterschiedliche Spaltenanzahl

Falsch:

css

.container {
  grid-template-areas:
    "header header header"
    "sidebar main";  /* Nur 2 Spalten! Müssen 3 sein! */
}

Richtig:

css

.container {
  grid-template-areas:
    "header header header"
    "sidebar main .";  /* 3 Spalten (mit Punkt für leer) */
}

📝 Zusammenfassung

In diesem Kapitel haben Sie gelernt:

✅ grid-template-areas:

Grid-Bereiche im Container definieren
Visuelle Layout-Erstellung

✅ grid-area:

Elemente Bereichen zuweisen
Kurzschreibweise für Platzierung

✅ Bereiche mit Punkten (.) ausblenden:

Leere Zellen erstellen

✅ Komplexe Layouts:

Dashboard-Layout erstellen
Intuitive Bereichsdefinition

✅ Responsive Design:

Layout für Mobile anpassen
grid-template-areas in Media Queries ändern

✅ Praktische Übung:

Komplettes Webseiten-Layout erstellt

✅ Häufige Fehler:

Bereichsnamen stimmen nicht überein
Bereiche sind nicht rechteckig
Zeilen haben unterschiedliche Spaltenanzahl

🎯 Nächste Schritte

Im nächsten Kapitel lernen Sie:

📖 grid-row und grid-column verwenden
🎯 Elemente präzise platzieren
🛠️ Spalten und Zeilen überspannen

👉 Weiter zu Kapitel 9: Elemente platzieren

💡 Tipps für Grid-Bereiche

Zeichnen Sie das Layout auf Papier: Bevor Sie code schreiben, skizzieren Sie das Grid
Verwenden Sie sprechende Namen: header, sidebar, main sind besser als bereich1, bereich2
Achten Sie auf Rechtecke: Bereiche müssen immer rechteckig sein
Testen Sie responsives Verhalten: Ändern Sie grid-template-areas in Media Queries
DevTools nutzen: Firefox zeigt grid-template-areas visualisiert an

Viel Erfolg beim Grid-Lernen! 🚀

Kapitel 8: Grid-Bereiche und Benennung ​

🎯 Lernziele ​

8.1 grid-template-areas: Grid-Bereiche definieren ​

📖 Grundlegende Syntax ​

🎨 Visuelle Erklärung ​

💻 Wichtige Regeln ​

💻 Einfaches Beispiel ​

8.2 grid-area: Elemente Bereichen zuweisen ​

📖 Grundlegende Syntax ​

💻 Beispiel ​

📊 Zusammenfassung der Schritte ​

8.3 Bereiche mit Punkten (.) ausblenden ​

📖 Grundlegende Syntax ​

💻 Beispiel ​

8.4 Komplexe Layouts mit grid-template-areas ​

🎯 Beispiel: Dashboard-Layout ​

8.5 Responsive Design mit grid-template-areas ​

🎯 Beispiel: Vom Desktop zum Mobile ​

8.6 grid-area Kurzschreibweise (Platzierung) ​

📖 Grundlegende Syntax ​

💻 Beispiel ​

🎯 Anwendungsfall ​

8.7 Praktische Übung: Webseiten-Layout erstellen ​

🎯 Übungsziel ​

📝 Schritt 1: HTML erstellen ​

📝 Schritt 2: CSS erstellen ​

🔍 Schritt 3: Ergebnis beobachten ​

8.8 Häufige Fehler bei Grid-Bereichen ​

❌ Fehler 1: Bereichsnamen stimmen nicht überein ​

❌ Fehler 2: Bereiche sind nicht rechteckig ​

❌ Fehler 3: Zeilen haben unterschiedliche Spaltenanzahl ​

📝 Zusammenfassung ​

🎯 Nächste Schritte ​

💡 Tipps für Grid-Bereiche ​

Kapitel 8: Grid-Bereiche und Benennung

🎯 Lernziele

8.1 `grid-template-areas`: Grid-Bereiche definieren

📖 Grundlegende Syntax

🎨 Visuelle Erklärung

💻 Wichtige Regeln

💻 Einfaches Beispiel

8.2 `grid-area`: Elemente Bereichen zuweisen

📖 Grundlegende Syntax

💻 Beispiel

📊 Zusammenfassung der Schritte

8.3 Bereiche mit Punkten (`.`) ausblenden

📖 Grundlegende Syntax

💻 Beispiel

8.4 Komplexe Layouts mit `grid-template-areas`

🎯 Beispiel: Dashboard-Layout

8.5 Responsive Design mit `grid-template-areas`

🎯 Beispiel: Vom Desktop zum Mobile

8.6 `grid-area` Kurzschreibweise (Platzierung)

📖 Grundlegende Syntax

💻 Beispiel

🎯 Anwendungsfall

8.7 Praktische Übung: Webseiten-Layout erstellen

🎯 Übungsziel

📝 Schritt 1: HTML erstellen

📝 Schritt 2: CSS erstellen

🔍 Schritt 3: Ergebnis beobachten

8.8 Häufige Fehler bei Grid-Bereichen

❌ Fehler 1: Bereichsnamen stimmen nicht überein

❌ Fehler 2: Bereiche sind nicht rechteckig

❌ Fehler 3: Zeilen haben unterschiedliche Spaltenanzahl

📝 Zusammenfassung

🎯 Nächste Schritte

💡 Tipps für Grid-Bereiche