Kapitel 3: Grundlegende Begriffe von CSS Grid

🎯 Lernziele

In diesem Kapitel lernen Sie:

✅ Die wichtigsten Grid-Begriffe verstehen
✅ Grid-Container und Grid-Elemente unterscheiden
✅ Grid-Linien, Grid-Tracks und Grid-Zellen visualisieren
✅ Durch einfache Übungen die Begriffe festigen

3.1 Grid-Container (Grid Container)

📖 Definition

Grid-Container ist das Element, auf dem display: grid angewendet wird. Es wird zum übergeordneten Element aller Grid-Elemente.

🎨 Visuelle Erklärung

┌──────────────────────────────────────┐
│        Grid-Container                │
│  ┌─────┬─────┬─────┐             │
│  │     │     │     │  Grid-Elemente│
│  ├─────┼─────┼─────┤             │
│  │     │     │     │              │
│  └─────┴─────┴─────┘             │
└──────────────────────────────────────┘

💻 Code-Beispiel

HTML:

html

<div class="container">       <!-- Grid-Container -->
  <div class="item">1</div>  <!-- Grid-Element -->
  <div class="item">2</div>  <!-- Grid-Element -->
  <div class="item">3</div>  <!-- Grid-Element -->
</div>

CSS:

css

.container {
  display: grid;            /* Macht dieses Element zum Grid-Container */
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

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

🔑 Wichtige Eigenschaften des Grid-Containers

Eigenschaft	Zweck
`display: grid`	Aktiviert Grid Layout
`grid-template-columns`	Definiert Spalten
`grid-template-rows`	Definiert Zeilen
`gap`	Abstand zwischen Elementen
`justify-items`	Ausrichtung horizontal
`align-items`	Ausrichtung vertikal

3.2 Grid-Elemente (Grid Items)

📖 Definition

Grid-Elemente sind die direkten Kinder des Grid-Containers. Sie werden automatisch in das Grid-Raster platziert.

🎨 Visuelle Erklärung

┌──────────────────────────────────────┐
│        Grid-Container                │
│  ┌─────┬─────┬─────┐             │
│  │ elem1│ elem2│ elem3│  ← Grid-Elemente│
│  ├─────┼─────┼─────┤             │
│  │ elem4│ elem5│ elem6│           │
│  └─────┴─────┴─────┘             │
└──────────────────────────────────────┘

💻 Code-Beispiel

HTML:

html

<div class="container">           <!-- Grid-Container -->
  <div class="item">Element 1</div>  <!-- Grid-Element -->
  <div class="item">Element 2</div>  <!-- Grid-Element -->
  <div class="item">Element 3</div>  <!-- Grid-Element -->
  <div class="item">Element 4</div>  <!-- Grid-Element -->
</div>

Wichtig: Nur die direkten Kinder werden zu Grid-Elementen!

html

<div class="container">           <!-- Grid-Container -->
  <div class="item">             <!-- Grid-Element -->
    <p>Text</p>                 <!-- KEIN Grid-Element (Enkel) -->
  </div>
</div>

🔑 Wichtige Eigenschaften der Grid-Elemente

Eigenschaft	Zweck
`grid-column`	Position in Spalten
`grid-row`	Position in Zeilen
`grid-area`	Benannter Bereich
`align-self`	Eigene vertikale Ausrichtung
`justify-self`	Eigene horizontale Ausrichtung

3.3 Grid-Linien (Grid Lines)

📖 Definition

Grid-Linien sind die horizontalen und vertikalen Linien, die das Grid-Raster bilden. Sie werden automatisch nummeriert, beginnend bei 1.

🎨 Visuelle Erklärung

Grid-Linien (vertikal):
|         |         |         |
1         2         3         4
┌─────────┬─────────┬─────────┐
│         │         │         │
│  Zelle  │         │         │
│         │         │         │
└─────────┴─────────┴─────────┘

Horizontale Grid-Linien:

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

💻 Code-Beispiel

HTML:

html

<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
</div>

CSS:

css

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

/* Element 1 von Linie 1 bis 3 platzieren (erste Zeile, erste zwei Spalten) */
.item1 {
  grid-column: 1 / 3;  /* Von Linie 1 bis Linie 3 */
  grid-row: 1 / 2;     /* Von Linie 1 bis Linie 2 */
}

/* Element 2 von Linie 3 bis 4 platzieren (erste Zeile, letzte Spalte) */
.item2 {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
}

/* Element 3 in die zweite Zeile platzieren */
.item3 {
  grid-column: 1 / 4;  /* Alle drei Spalten */
  grid-row: 2 / 3;
}

🔢 Grid-Linien zählen

Wichtig: Die Zählung beginnt bei 1, nicht bei 0!

Spalten:     [Spalte 1]  [Spalte 2]  [Spalte 3]
Grid-Linien:     1           2           3           4

3.4 Grid-Tracks (Grid Tracks)

📖 Definition

Grid-Tracks sind die Räume zwischen zwei benachbarten Grid-Linien. Es gibt Zeilen-Tracks und Spalten-Tracks.

🎨 Visuelle Erklärung

Grid-Track (Spalte):
┌─────────┐
│ Spalte  │  ← Spalten-Track (zwischen Linie 1 und 2)
└─────────┘

Grid-Track (Zeile):
┌─────────┐
│         │  ← Zeilen-Track (zwischen Linie 1 und 2)
└─────────┘

💻 Code-Beispiel

CSS:

css

.container {
  display: grid;
  /* 3 Spalten-Tracks, je 1fr breit */
  grid-template-columns: 1fr 1fr 1fr;
  /* 2 Zeilen-Tracks, je 100px hoch */
  grid-template-rows: 100px 100px;
}

Ergebnis:

3 Spalten-Tracks
2 Zeilen-Tracks
Insgesamt 6 Grid-Zellen

📏 Track-Größen festlegen

Einheit	Bedeutung	Beispiel
`px`	Feste Größe	`200px`
`%`	Prozentual	`30%`
`fr`	Bruchteil	`1fr`, `2fr`
`auto`	Automatisch	`auto`
`minmax()`	Bereich	`minmax(100px, 1fr)`

3.5 Grid-Zellen (Grid Cells)

📖 Definition

Grid-Zellen sind die kleinste Einheit im Grid-Layout. Sie entstehen, wenn sich ein Zeilen-Track und ein Spalten-Track kreuzen (ähnlich wie Tabellenzellen).

🎨 Visuelle Erklärung

┌─────────┬─────────┬─────────┐
│ Zelle 1 │ Zelle 2 │ Zelle 3 │  ← Grid-Zellen
├─────────┼─────────┼─────────┤
│ Zelle 4 │ Zelle 5 │ Zelle 6 │
└─────────┴─────────┴─────────┘

💻 Code-Beispiel

HTML:

html

<div class="container">
  <div class="item">1</div>  <!-- Zelle (1,1) -->
  <div class="item">2</div>  <!-- Zelle (1,2) -->
  <div class="item">3</div>  <!-- Zelle (1,3) -->
  <div class="item">4</div>  <!-- Zelle (2,1) -->
  <div class="item">5</div>  <!-- Zelle (2,2) -->
  <div class="item">6</div>  <!-- Zelle (2,3) -->
</div>

CSS:

css

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 10px;
}

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

📊 Grid-Zellen vs. HTML-Tabellen

Merkmal	Grid-Zellen	HTML-Tabellen
Zweck	Layout	Datendarstellung
Flexibilität	Hoch	Gering
Responsivität	Einfach	Schwierig
Semantik	Neutral	Tabellarische Daten

3.6 Grid-Bereiche (Grid Areas)

📖 Definition

Grid-Bereiche sind rechteckige Bereiche, die aus mehreren Grid-Zellen bestehen. Sie können benannt werden, um die Platzierung zu vereinfachen.

🎨 Visuelle Erklärung

┌─────────────────────────────────┐
│          Header-Bereich          │  ← grid-area: header
├────────────┬────────────────────┤
│            │                    │
│  Sidebar   │      Main          │
│  Bereich   │      Bereich       │
│            │                    │
├────────────┴────────────────────┤
│          Footer-Bereich          │  ← grid-area: footer
└─────────────────────────────────┘

💻 Code-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;
}

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

🔑 Vorteile von Grid-Bereichen

✅ Vorteile:

Intuitive Layout-Definition
Einfaches Responsive Design
Klare Trennung von Struktur und Inhalt
Leicht verständlich für andere Entwickler

3.7 Praktische Übung: Begriffe visualisieren

🎯 Übungsziel

Erstellen Sie ein einfaches Grid-Layout und identifizieren Sie alle Begriffe visuell.

📝 Schritt 1: HTML erstellen

html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Grid-Begriffe Übung</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">           <!-- Grid-Container -->
    <div class="item item1">1</div>  <!-- Grid-Element -->
    <div class="item item2">2</div>  <!-- Grid-Element -->
    <div class="item item3">3</div>  <!-- Grid-Element -->
    <div class="item item4">4</div>  <!-- Grid-Element -->
    <div class="item item5">5</div>  <!-- Grid-Element -->
    <div class="item item6">6</div>  <!-- Grid-Element -->
  </div>
</body>
</html>

📝 Schritt 2: CSS erstellen

css

/* style.css */

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

.container {
  display: grid;                   /* Grid-Container aktivieren */
  grid-template-columns: 1fr 1fr 1fr; /* 3 Spalten-Tracks */
  grid-template-rows: 100px 100px;    /* 2 Zeilen-Tracks */
  gap: 10px;                         /* Abstand zwischen Zellen */
  padding: 20px;
  background-color: #f0f0f0;
}

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

/* Elemente platzieren */
.item1 {
  grid-column: 1 / 3;  /* Von Linie 1 bis 3 (erste zwei Spalten) */
  grid-row: 1 / 2;     /* Erste Zeile */
  background-color: #e74c3c;
}

.item2 {
  grid-column: 3 / 4;  /* Letzte Spalte */
  grid-row: 1 / 2;     /* Erste Zeile */
  background-color: #2ecc71;
}

/* item3, item4, item5, item6 werden automatisch platziert */

🔍 Schritt 3: Im Browser untersuchen

Live Server starten (Rechtsklick → Open with Live Server)
DevTools öffnen (F12)
Grid-Überlagerung anzeigen:
- Element .container auswählen
- Auf das kleine Grid-Symbol neben display: grid klicken
Begriffe identifizieren:
- 🟢 Grid-Linien (nummeriert)
- 🔵 Grid-Tracks (Zwischenräume)
- 🟡 Grid-Zellen (Einzelne Kacheln)
- 🟠 Grid-Bereiche (bei grid-area)

📊 Ergebnis-Check

Fragen zur Selbstkontrolle:

✅ Wie viele Grid-Linien hat das Layout vertikal?
- Antwort: 4 (1, 2, 3, 4)
✅ Wie viele Grid-Zellen gibt es insgesamt?
- Antwort: 6 (3 Spalten × 2 Zeilen)
✅ Welches Element überspannt zwei Spalten?
- Antwort: .item1
✅ Was passiert, wenn Sie grid-column: 1 / 4 für .item6 setzen?
- Antwort: .item6 überspannt alle drei Spalten in der zweiten Zeile

📝 Zusammenfassung

In diesem Kapitel haben Sie gelernt:

✅ Grid-Container: Das Element mit display: grid

✅ Grid-Elemente: Die direkten Kinder des Containers

✅ Grid-Linien: Nummerierte Linien, die das Raster bilden

✅ Grid-Tracks: Räume zwischen Grid-Linien (Spalten und Zeilen)

✅ Grid-Zellen: Kleinste Einheit (Kreuzung aus Zeile und Spalte)

✅ Grid-Bereiche: Benannte Bereiche aus mehreren Zellen

✅ Praktische Übung: Begriffe visuell identifiziert

🎯 Nächste Schritte

Im nächsten Kapitel lernen Sie:

📖 Wie man Grid Layout aktiviert (display: grid vs. inline-grid)
🎯 Standardverhalten von Grid-Elementen
🛠️ Erstes funktionierendes Grid erstellen

👉 Weiter zu Kapitel 4: Grid Layout aktivieren

💡 Tipps zur Begriffsverwendung

Merken Sie sich: Container → Elemente → Linien → Tracks → Zellen → Bereiche
Zeichnen Sie Skizzen: Bevor Sie code schreiben, skizzieren Sie das Grid auf Papier
Verwenden Sie DevTools: Die Grid-Überlagerung ist Ihr bester Freund
Üben Sie täglich: Erstellen Sie kleine Grids mit verschiedenen Konfigurationen

Viel Erfolg beim Grid-Lernen! 🚀

Kapitel 3: Grundlegende Begriffe von CSS Grid ​

🎯 Lernziele ​

3.1 Grid-Container (Grid Container) ​

📖 Definition ​

🎨 Visuelle Erklärung ​

💻 Code-Beispiel ​

🔑 Wichtige Eigenschaften des Grid-Containers ​

3.2 Grid-Elemente (Grid Items) ​

📖 Definition ​

🎨 Visuelle Erklärung ​

💻 Code-Beispiel ​

🔑 Wichtige Eigenschaften der Grid-Elemente ​

3.3 Grid-Linien (Grid Lines) ​

📖 Definition ​

🎨 Visuelle Erklärung ​

💻 Code-Beispiel ​

🔢 Grid-Linien zählen ​

3.4 Grid-Tracks (Grid Tracks) ​

📖 Definition ​

🎨 Visuelle Erklärung ​

💻 Code-Beispiel ​

📏 Track-Größen festlegen ​

3.5 Grid-Zellen (Grid Cells) ​

📖 Definition ​

🎨 Visuelle Erklärung ​

💻 Code-Beispiel ​

📊 Grid-Zellen vs. HTML-Tabellen ​

3.6 Grid-Bereiche (Grid Areas) ​

📖 Definition ​

🎨 Visuelle Erklärung ​

💻 Code-Beispiel ​

🔑 Vorteile von Grid-Bereichen ​

3.7 Praktische Übung: Begriffe visualisieren ​

🎯 Übungsziel ​

📝 Schritt 1: HTML erstellen ​

📝 Schritt 2: CSS erstellen ​

🔍 Schritt 3: Im Browser untersuchen ​

📊 Ergebnis-Check ​

📝 Zusammenfassung ​

🎯 Nächste Schritte ​

💡 Tipps zur Begriffsverwendung ​

Kapitel 3: Grundlegende Begriffe von CSS Grid

🎯 Lernziele

3.1 Grid-Container (Grid Container)

📖 Definition

🎨 Visuelle Erklärung

💻 Code-Beispiel

🔑 Wichtige Eigenschaften des Grid-Containers

3.2 Grid-Elemente (Grid Items)

📖 Definition

🎨 Visuelle Erklärung

💻 Code-Beispiel

🔑 Wichtige Eigenschaften der Grid-Elemente

3.3 Grid-Linien (Grid Lines)

📖 Definition

🎨 Visuelle Erklärung

💻 Code-Beispiel

🔢 Grid-Linien zählen

3.4 Grid-Tracks (Grid Tracks)

📖 Definition

🎨 Visuelle Erklärung

💻 Code-Beispiel

📏 Track-Größen festlegen

3.5 Grid-Zellen (Grid Cells)

📖 Definition

🎨 Visuelle Erklärung

💻 Code-Beispiel

📊 Grid-Zellen vs. HTML-Tabellen

3.6 Grid-Bereiche (Grid Areas)

📖 Definition

🎨 Visuelle Erklärung

💻 Code-Beispiel

🔑 Vorteile von Grid-Bereichen

3.7 Praktische Übung: Begriffe visualisieren

🎯 Übungsziel

📝 Schritt 1: HTML erstellen

📝 Schritt 2: CSS erstellen

🔍 Schritt 3: Im Browser untersuchen

📊 Ergebnis-Check

📝 Zusammenfassung

🎯 Nächste Schritte

💡 Tipps zur Begriffsverwendung