Kapitel 5: Grid-Tracks festlegen

🎯 Lernziele

In diesem Kapitel lernen Sie:

• ✅ grid-template-columns und grid-template-rows verwenden
• ✅ Verschiedene Einheiten nutzen (px, %, fr, auto)
• ✅ repeat() Funktion verwenden
• ✅ minmax() Funktion verstehen

---

5.1 grid-template-columns: Spalten definieren

📖 Grundlegende Syntax

.container {
  grid-template-columns: <Wert1> <Wert2> <Wert3> ...;
}

Jeder Wert repräsentiert die Breite einer Spalte.

💻 Beispiel 1: Feste Breite (px)

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px; /* 3 Spalten à 200px */
  gap: 20px;
}

Ergebnis:

┌──────────┬──────────┬──────────┐
│ 200px    │ 200px    │ 200px    │
└──────────┴──────────┴──────────┘
←    600px gesamt (ohne gap)    →

💻 Beispiel 2: Prozentuale Breite (%)

.container {
  display: grid;
  grid-template-columns: 30% 40% 30%; /* Verteilt auf 100% */
  gap: 20px;
}

Ergebnis:

┌──────────┬──────────┬──────────┐
│  30%     │  40%     │  30%     │
└──────────┴──────────┴──────────┘
←    100% der Container-Breite  →

Achtung: Prozentuale Breiten können ungenau sein, wenn gap verwendet wird!

💻 Beispiel 3: Flexibler Bruchteil (fr)

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3 gleich breite Spalten */
  gap: 20px;
}

Ergebnis:

┌──────────┬──────────┬──────────┐
│   1fr    │   1fr    │   1fr    │
└──────────┴──────────┴──────────┘
←    Verfügbarer Platz wird gleichmäßig verteilt    →

Erklärung:

• 1fr = 1 Bruchteil des verfügbaren Platzes
• 2fr = doppelt so breit wie 1fr

💻 Beispiel 4: auto (Automatische Breite)

.container {
  display: grid;
  grid-template-columns: 200px auto 200px; /* Mittlere Spalte passt sich an */
  gap: 20px;
}

Ergebnis:

┌──────────┬──────────────────┬──────────┐
│ 200px    │ restlicher Platz  │ 200px    │
└──────────┴──────────────────┴──────────┘

---

5.2 grid-template-rows: Zeilen definieren

📖 Grundlegende Syntax

.container {
  grid-template-rows: <Wert1> <Wert2> <Wert3> ...;
}

Jeder Wert repräsentiert die Höhe einer Zeile.

💻 Beispiel 1: Feste Höhe (px)

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100px 200px; /* Erste Zeile 100px, zweite 200px */
  gap: 20px;
}

Ergebnis:

┌──────────┬──────────┐
│ 100px hoch                │
├──────────┼──────────┤
│ 200px hoch                │
└──────────┴──────────┘

💻 Beispiel 2: auto (Höhe passt sich Inhalt an)

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto; /* Höhe passt sich Inhalt an */
  gap: 20px;
}

Ergebnis:

┌──────────┬──────────┐
│ Höhe passt sich        │
│ Inhalt an              │
├──────────┼──────────┤
│ Höhe passt sich        │
│ Inhalt an              │
└──────────┴──────────┘

---

5.3 repeat(): Wiederholungen vereinfachen

📖 Grundlegende Syntax

.container {
  grid-template-columns: repeat(<Anzahl>, <Wert>);
}

💻 Beispiel 1: Gleiche Spalten

/* Umständlich */
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;

/* Besser mit repeat() */
grid-template-columns: repeat(5, 1fr); /* 5 gleich breite Spalten */

💻 Beispiel 2: Muster wiederholen

.container {
  grid-template-columns: repeat(3, 200px 400px); /* Wiederholt 3 mal: 200px, 400px */
  /* Ergebnis: 200px 400px 200px 400px 200px 400px */
}

💻 Beispiel 3: Kombination mit anderen Werten

.container {
  grid-template-columns: 200px repeat(3, 1fr) 200px; /* Seitenleisten + 3 flexible Spalten */
}

Ergebnis:

┌──────┬──────────┬──────────┬──────────┬──────┐
│ 200px│   1fr    │   1fr    │   1fr    │ 200px│
└──────┴──────────┴──────────┴──────────┴──────┘

---

5.4 minmax(): Flexibler Bereich

📖 Grundlegende Syntax

.container {
  grid-template-columns: minmax(<Min>, <Max>);
}

💻 Beispiel 1: Mindest- und Maximalgröße

.container {
  display: grid;
  grid-template-columns: minmax(100px, 1fr) minmax(200px, 2fr);
  gap: 20px;
}

Ergebnis:

• Erste Spalte: mindestens 100px, maximal 1 Bruchteil
• Zweite Spalte: mindestens 200px, maximal 2 Bruchteile

💻 Beispiel 2: Responsive Spalten

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

Ergebnis:

• Spalten sind mindestens 250px breit
• Füllen den verfügbaren Platz (auto-fill)
• Passen sich automatisch an Bildschirmbreite an

---

5.5 fr Einheit vs. px / %

📊 Vergleichstabelle

Einheit	Verhalten	Anwendungsfall
px	Feste Größe	Sidebar, feste Elemente
%	Prozentual zur Container-Breite	Alte Layouts (Vorsicht bei gap)
fr	Flexibler Bruchteil	Responsive Layouts
auto	Passt sich Inhalt an	Dynamische Inhalte
minmax()	Bereich von Min bis Max	Fortgeschrittene Responsivität

💻 Beispiel: Kombination verschiedener Einheiten

.container {
  display: grid;
  grid-template-columns: 250px 1fr 2fr 100px; /* Sidebar, flexibel, flexibler, fixed */
  gap: 20px;
}

Erklärung:

1. 250px: Feste Breite (z.B. Sidebar)
2. 1fr: Nimmt 1 Bruchteil des verbleibenden Platzes ein
3. 2fr: Nimmt 2 Bruchteile ein (doppelt so breit wie 1fr)
4. 100px: Feste Breite (z.B. Werbeleiste)

---

5.6 Praktische Übung: Verschiedene Track-Größen kombinieren

🎯 Übungsziel

Erstellen Sie ein Layout mit verschiedenen Spaltenbreiten.

📝 Schritt 1: HTML erstellen

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Grid-Tracks Übung</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="item">Sidebar</div>
    <div class="item">Main Content</div>
    <div class="item">Extra</div>
    <div class="item">Ad</div>
  </div>
</body>
</html>

📝 Schritt 2: CSS erstellen

/* style.css */

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

.container {
  display: grid;
  /* 250px (Sidebar) | 1fr (Main) | 1fr (Extra) | 100px (Ad) */
  grid-template-columns: 250px 1fr 1fr 100px;
  grid-template-rows: 100vh; /* Volle Höhe */
  gap: 20px;
  padding: 20px;
}

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

/* Anpassung für verschiedene Bildschirmgrößen */
@media (max-width: 1024px) {
  .container {
    grid-template-columns: 200px 1fr 100px; /* Extra fällt weg oder wird umgebrochen */
  }
}

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr; /* Alles untereinander */
    grid-template-rows: auto;
  }
}

🔍 Schritt 3: Ergebnis beobachten

Desktop:

┌──────────┬──────────────────┬──────────┬──────┐
│ Sidebar  │ Main Content      │ Extra    │  Ad   │
│ 250px    │ 1fr              │ 1fr      │ 100px │
└──────────┴──────────────────┴──────────┴──────┘

Tablet (1024px):

┌──────────┬──────────────────┬──────┐
│ Sidebar  │ Main Content      │  Ad   │
│ 200px    │ 1fr              │ 100px │
└──────────┴──────────────────┴──────┘

Mobile (768px):

┌──────────────────────────────────┐
│ Sidebar                          │
├──────────────────────────────────┤
│ Main Content                     │
├──────────────────────────────────┤
│ Extra                            │
├──────────────────────────────────┤
│ Ad                               │
└──────────────────────────────────┘

---

5.7 Häufige Fehler bei Track-Größen

❌ Fehler 1: fr wird falsch verstanden

Falsche Annahme:

.container {
  grid-template-columns: 1fr 1fr 1fr; /* Denkt: 33.33% */
}

Tatsächliches Verhalten:

• fr verteilt verfügbaren Platz, nicht die Gesamtbreite
• Wenn ein Element breiter Inhalt hat, wächst die Spalte

Lösung: Verwenden Sie minmax() für bessere Kontrolle:

.container {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}

❌ Fehler 2: Prozentuale Breiten mit gap kombinieren

Problem:

.container {
  grid-template-columns: 50% 50%;
  gap: 20px; /* Überlauf! 50% + 50% + 20px > 100% */
}

Lösung: Verwenden Sie fr statt %:

.container {
  grid-template-columns: 1fr 1fr;
  gap: 20px; /* Funktioniert perfekt */
}

❌ Fehler 3: repeat() Syntax falsch

Falsch:

grid-template-columns: repeat(3, 100px 200px); /* Syntaxfehler! */

Richtig:

grid-template-columns: repeat(3, 100px 200px); /* Wiederholt 100px 200px dreimal */
/* Ergebnis: 100px 200px 100px 200px 100px 200px */

---

📝 Zusammenfassung

In diesem Kapitel haben Sie gelernt:

✅ grid-template-columns und grid-template-rows:

• Spalten und Zeilen definieren
• Verschiedene Einheiten (px, %, fr, auto)

✅ repeat() Funktion:

• Wiederholungen vereinfachen
• Muster wiederholen

✅ minmax() Funktion:

• Flexibler Bereich für responsive Design

✅ fr Einheit:

• Flexibler Bruchteil des verfügbaren Platzes
• Kombination mit festen Breiten

✅ Praktische Übung:

• Verschiedene Track-Größen kombiniert
• Responsive Anpassungen vorgenommen

✅ Häufige Fehler:

• fr Missverständnisse
• Prozentuale Breiten mit gap
• repeat() Syntaxfehler

---

🎯 Nächste Schritte

Im nächsten Kapitel lernen Sie:

• 📖 gap Eigenschaft verwenden
• 🎯 Abstände zwischen Spalten und Zeilen steuern
• 🛠️ Responsive Abstände setzen

👉 Weiter zu Kapitel 6: Abstände (Gap)

---

💡 Tipps für Grid-Tracks

1. Bevorzugen Sie fr gegenüber %: Bessere Kompatibilität mit gap
2. Verwenden Sie repeat(): Macht Code lesbarer
3. minmax() für Responsivität: Unverzichtbar für moderne Webseiten
4. Testen Sie verschiedene Bildschirmgrößen: Was auf Desktop gut aussieht, kann auf Mobile katastrophal sein
5. DevTools nutzen: Visualisieren Sie Grid-Tracks im Browser

Viel Erfolg beim Grid-Lernen! 🚀