Kapitel 9: Elemente platzieren (grid-row & grid-column)

🎯 Lernziele

In diesem Kapitel lernen Sie:

✅ grid-column und grid-row verwenden
✅ Grid-Linien für Platzierung nutzen
✅ Elemente über mehrere Spalten/Zeilen spannen
✅ span Schlüsselwort verstehen

9.1 `grid-column`: Spalten festlegen

📖 Grundlegende Syntax

css

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

🎨 Visuelle Erklärung

Grid-Linien (vertikal):

|         |         |         |
1         2         3         4
┌─────────┬─────────┬─────────┐
│         │         │         │
│  Zelle  │         │         │
│         │         │         │
└─────────┴─────────┴─────────┘

Beispiel:

css

.item1 {
  grid-column: 1 / 3;  /* Von Linie 1 bis 3 (2 Spalten) */
}

Visuelles Ergebnis:

┌───────────────────┬─────────┐
│        item1       │         │
├───────────────────┼─────────┤
│                   │         │
└───────────────────┴─────────┘

💻 Einfaches 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;
  gap: 20px;
}

.item1 {
  grid-column: 1 / 3;  /* Erste zwei Spalten */
  background-color: #e74c3c;
}

.item2 {
  grid-column: 3 / 4;  /* Letzte Spalte */
  background-color: #3498db;
}

.item3 {
  grid-column: 1 / 4;  /* Alle drei Spalten */
  background-color: #2ecc71;
}

9.2 `grid-row`: Zeilen festlegen

📖 Grundlegende Syntax

css

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

💻 Beispiel

CSS:

css

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

.item1 {
  grid-row: 1 / 3;  /* Erste zwei Zeilen */
  background-color: #e74c3c;
}

.item2 {
  grid-row: 2 / 4;  /* Zweite und dritte Zeile */
  background-color: #3498db;
}

Visuelles Ergebnis:

┌──────────┬──────────┐
│   item1  │           │
│   (Z1-2)│   item2   │  ← item2 startet Z2
├──────────┼──────────┤
│           │   (Z2-3) │
├──────────┼──────────┤
│           │           │
└──────────┴──────────┘

9.3 `span`: Über mehrere Spalten/Zeilen spannen

📖 Grundlegende Syntax

css

.element {
  grid-column: <start> / span <anzahl>;
}

💻 Beispiel 1: `span` für Spalten

CSS:

css

.item {
  grid-column: 1 / span 2;  /* Von Linie 1, 2 Spalten breit */
  /* Entspricht: grid-column: 1 / 3; */
}

💻 Beispiel 2: `span` für Zeilen

CSS:

css

.item {
  grid-row: 2 / span 3;  /* Von Linie 2, 3 Zeilen hoch */
  /* Entspricht: grid-row: 2 / 5; */
}

🎯 Vorteile von `span`

✅ Intuitiver: "Ich will 2 Spalten breit sein" statt "Ich will bis Linie 3 gehen"
✅ Flexibler: Wenn Sie die Start-Linie ändern, müssen Sie das Ende nicht neu berechnen

9.4 Kurzschreibweise

📖 `grid-column` und `grid-row` Kurzform

Lang:

css

.item {
  grid-column-start: 1;
  grid-column-end: 3;
  
  grid-row-start: 1;
  grid-row-end: 2;
}

Kurz:

css

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

📖 `grid-area` (Alles auf einmal)

Syntax:

css

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

Beispiel:

css

.item {
  grid-area: 1 / 1 / 3 / 3;  /* Z1-S1 bis Z3-S3 */
}

Entspricht:

css

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

9.5 Negative Grid-Linien

📖 Grundlegende Konzept

Sie können auch negative Zahlen verwenden, um vom Ende zu zählen!

💻 Beispiel

Grid mit 4 Spalten:

Linien:   1       2       3       4       5
          |       |       |       |       |
Spalten: [ Spalte 1 ] [ Spalte 2 ] [ Spalte 3 ] [ Spalte 4 ]
Negativ:   -5      -4      -3      -2      -1

CSS:

css

.item {
  grid-column: 1 / -1;  /* Von Linie 1 bis letzte Linie */
  /* Entspricht: grid-column: 1 / 5; */
}

🎯 Anwendungsfall

Letzte Spalte überspannen:

css

.item {
  grid-column: -2 / -1;  /* Vorletzte bis letzte Linie */
}

9.6 Benannte Grid-Linien

📖 Grundlegende Syntax

Sie können Grid-Linien Namen geben!

CSS:

css

.container {
  grid-template-columns: [start] 1fr [middle] 1fr [end];
  grid-template-rows: [top] 100px [bottom] 100px;
}

Verwendung:

css

.item {
  grid-column: start / end;  /* Statt 1 / 3 */
  grid-row: top / bottom;     /* Statt 1 / 2 */
}

🎯 Vorteile

✅ Lesbarer Code: start / end ist verständlicher als 1 / 3
✅ Wartbarer: Wenn Sie Spalten hinzufügen, müssen Sie die Zahlen nicht ändern

9.7 Praktische Übung: Elemente platzieren

🎯 Übungsziel

Erstellen Sie ein Layout mit präziser Element-Platzierung.

📝 Schritt 1: HTML erstellen

html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Grid Platzierung Übung</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="header">Header</div>
    <div class="sidebar">Sidebar</div>
    <div class="main">Main Content</div>
    <div class="footer">Footer</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;
}

.container {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  gap: 20px;
  padding: 20px;
}

.header {
  grid-column: 1 / 3;  /* Alle zwei Spalten */
  grid-row: 1 / 2;      /* Erste Zeile */
  background-color: #2c3e50;
  color: white;
  padding: 30px;
  text-align: center;
  font-size: 24px;
}

.sidebar {
  grid-column: 1 / 2;  /* Erste Spalte */
  grid-row: 2 / 3;     /* Zweite Zeile */
  background-color: #ecf0f1;
  padding: 20px;
}

.main {
  grid-column: 2 / 3;  /* Zweite Spalte */
  grid-row: 2 / 3;     /* Zweite Zeile */
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.footer {
  grid-column: 1 / 3;  /* Alle zwei Spalten */
  grid-row: 3 / 4;     /* Dritte Zeile */
  background-color: #2c3e50;
  color: white;
  padding: 20px;
  text-align: center;
}

🔍 Schritt 3: Ergebnis beobachten

Visuelles Ergebnis:

┌──────────────────────────────────────┐
│             Header                   │  ← grid-column: 1 / 3
├────────────┬───────────────────────┤
│  Sidebar   │      Main Content      │
│             │                        │
├────────────┴───────────────────────┤
│             Footer                   │  ← grid-column: 1 / 3
└──────────────────────────────────────┘

9.8 Häufige Fehler bei der Platzierung

❌ Fehler 1: Grid-Linien falsch gezählt

Falsch:

css

.item {
  grid-column: 0 / 3;  /* Linie 0 existiert nicht! */
}

Richtig:

css

.item {
  grid-column: 1 / 3;  /* Linie 1 bis 3 */
}

Wichtig: Grid-Linien beginnen bei 1, nicht bei 0!

❌ Fehler 2: Elemente überlappen unbeabsichtigt

Problem:

css

.item1 {
  grid-column: 1 / 3;
}

.item2 {
  grid-column: 2 / 4;  /* Überlappt mit item1! */
}

Lösung:

css

.item1 {
  grid-column: 1 / 3;
}

.item2 {
  grid-column: 3 / 4;  /* Keine Überlappung */
}

❌ Fehler 3: `span` falsch verwendet

Falsch:

css

.item {
  grid-column: span 2;  /* Fehlt Start-Linie! */
}

Richtig:

css

.item {
  grid-column: 1 / span 2;  /* Von Linie 1, 2 Spalten breit */
}

📝 Zusammenfassung

In diesem Kapitel haben Sie gelernt:

✅ grid-column und grid-row:

Elemente präzise platzieren
Grid-Linien verwenden

✅ span Schlüsselwort:

Elemente über mehrere Spalten/Zeilen spannen
Intuitivere Schreibweise

✅ Kurzschreibweise:

grid-column: start / end
grid-row: start / end
grid-area: row-start / col-start / row-end / col-end

✅ Negative Grid-Linien:

Vom Ende zählen
-1 ist die letzte Linie

✅ Benannte Grid-Linien:

Lesbareren Code erstellen
Wartbareren Code erstellen

✅ Praktische Übung:

Layout mit präziser Platzierung erstellt

✅ Häufige Fehler:

Grid-Linien falsch gezählt
Elemente überlappen unbeabsichtigt
span falsch verwendet

🎯 Nächste Schritte

Im nächsten Kapitel lernen Sie:

📖 align-self und justify-self verwenden
🎯 Einzelne Elemente anders ausrichten
🛠️ order für Reihenfolge verwenden

👉 Weiter zu Kapitel 10: Elemente ausrichten

💡 Tipps für Element-Platzierung

Zeichnen Sie das Grid: Skizzieren Sie das Layout auf Papier vor dem Coden
Verwenden Sie span: Es ist intuitiver als absolute Linien-Nummern
Negative Linien für letzte Spalten/Zeilen: grid-column: 1 / -1 ist praktisch
Benannte Linien: Verwenden Sie sie für komplexe Layouts
DevTools nutzen: Die Grid-Überlagerung zeigt Linien-Nummern

Viel Erfolg beim Grid-Lernen! 🚀

Kapitel 9: Elemente platzieren (grid-row & grid-column) ​

🎯 Lernziele ​

9.1 grid-column: Spalten festlegen ​

📖 Grundlegende Syntax ​

🎨 Visuelle Erklärung ​

💻 Einfaches Beispiel ​

9.2 grid-row: Zeilen festlegen ​

📖 Grundlegende Syntax ​

💻 Beispiel ​

9.3 span: Über mehrere Spalten/Zeilen spannen ​

📖 Grundlegende Syntax ​

💻 Beispiel 1: span für Spalten ​

💻 Beispiel 2: span für Zeilen ​

🎯 Vorteile von span ​

9.4 Kurzschreibweise ​

📖 grid-column und grid-row Kurzform ​

📖 grid-area (Alles auf einmal) ​

9.5 Negative Grid-Linien ​

📖 Grundlegende Konzept ​

💻 Beispiel ​

🎯 Anwendungsfall ​

9.6 Benannte Grid-Linien ​

📖 Grundlegende Syntax ​

🎯 Vorteile ​

9.7 Praktische Übung: Elemente platzieren ​

🎯 Übungsziel ​

📝 Schritt 1: HTML erstellen ​

📝 Schritt 2: CSS erstellen ​

🔍 Schritt 3: Ergebnis beobachten ​

9.8 Häufige Fehler bei der Platzierung ​

❌ Fehler 1: Grid-Linien falsch gezählt ​

❌ Fehler 2: Elemente überlappen unbeabsichtigt ​

❌ Fehler 3: span falsch verwendet ​

📝 Zusammenfassung ​

🎯 Nächste Schritte ​

💡 Tipps für Element-Platzierung ​

Kapitel 9: Elemente platzieren (grid-row & grid-column)

🎯 Lernziele

9.1 `grid-column`: Spalten festlegen

📖 Grundlegende Syntax

🎨 Visuelle Erklärung

💻 Einfaches Beispiel

9.2 `grid-row`: Zeilen festlegen

📖 Grundlegende Syntax

💻 Beispiel

9.3 `span`: Über mehrere Spalten/Zeilen spannen

📖 Grundlegende Syntax

💻 Beispiel 1: `span` für Spalten

💻 Beispiel 2: `span` für Zeilen

🎯 Vorteile von `span`

9.4 Kurzschreibweise

📖 `grid-column` und `grid-row` Kurzform

📖 `grid-area` (Alles auf einmal)

9.5 Negative Grid-Linien

📖 Grundlegende Konzept

💻 Beispiel

🎯 Anwendungsfall

9.6 Benannte Grid-Linien

📖 Grundlegende Syntax

🎯 Vorteile

9.7 Praktische Übung: Elemente platzieren

🎯 Übungsziel

📝 Schritt 1: HTML erstellen

📝 Schritt 2: CSS erstellen

🔍 Schritt 3: Ergebnis beobachten

9.8 Häufige Fehler bei der Platzierung

❌ Fehler 1: Grid-Linien falsch gezählt

❌ Fehler 2: Elemente überlappen unbeabsichtigt

❌ Fehler 3: `span` falsch verwendet

📝 Zusammenfassung

🎯 Nächste Schritte

💡 Tipps für Element-Platzierung