Freitag, 12-09-2025_WEB_KLU

Thema: CSS Grid (Grundlagen)

Ziel

• Verständnis für das CSS Grid Layout
• Abgrenzung zu Flexbox
• Praktische Anwendung im Raster-Layout

---

Was ist CSS Grid?

CSS Grid ist ein zweidimensionales Layoutsystem.

Unterschied:

• Flexbox → eindimensional (Zeile oder Spalte)
• Grid → zweidimensional (Zeilen und Spalten gleichzeitig)

Grid eignet sich besonders für:

• Seitenlayouts
• Dashboard-Strukturen
• Komplexe Raster

---

Container vs. Items

Grid-Container

Element mit:

.container {
  display: grid;
}

Grid-Items

• Direkte Kinder des Containers
• Nur direkte Kinder werden automatisch Grid-Items

Wichtig:
Verschachtelte Elemente sind keine Grid-Items, wenn ihr Elternteil kein Grid ist.

---

Spalten und Zeilen definieren

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

Ergebnis:

• 3 feste Spalten
• 2 feste Zeilen

---

Flexible Einheiten

fr (Fractional Unit)

Verteilt verfügbaren Restplatz proportional.

grid-template-columns: 1fr 2fr 1fr;

Bedeutung:

• Insgesamt 4 Teile
• Verhältnis 1:2:1

---

Weitere Einheiten

• auto → Größe abhängig vom Inhalt
• % → relative Größe
• px → feste Größe

Praxis:

Zu viele Pixelwerte → Layout nicht responsiv.

---

Abstände (Gaps)

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

• gap → Abstand zwischen Reihen und Spalten
• row-gap / column-gap → getrennte Steuerung

---

Items gezielt platzieren

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

Bedeutung:

• Beginnt bei Spaltenlinie 1
• Endet vor Linie 3
• Spannt über 2 Spalten

Alternative Kurzform:

grid-column: span 2;

---

Nützliche Funktionen

repeat()

grid-template-columns: repeat(3, 1fr);

→ 3 gleich große Spalten

---

minmax()

grid-template-columns: repeat(3, minmax(150px, 1fr));

• Minimum: 150px
• Maximum: 1fr
• Ermöglicht responsive Layouts

---

Typische Fehler

• display: grid; vergessen
• Grid nur auf verschachteltes Element gesetzt
• Zu viele feste Pixelwerte
• fr nicht sinnvoll kombiniert
• Items nicht korrekt platziert

---

Übungsidee (Unterricht)

• 4 Spalten
• 3 Zeilen
• Spaltenbreiten: 1fr, 2fr, auto, 100px
• 6 Items einfügen
• Ein Item über 2 Spalten spannen
• Mit gap und repeat() experimentieren

---

Prüfungs- & Praxisbezug

Wichtig zu verstehen:

• Unterschied Grid vs. Flexbox
• Container/Item-Prinzip
• Bedeutung von fr
• Responsive Verhalten durch flexible Einheiten
• Struktur zuerst (HTML), Design danach (CSS)

CSS Grid ist heute Standard für moderne Weblayouts.