CSS Grid: Layouts selbst umsetzen

lock
Bevorstehend

Lernen Sie CSS Grid anhand von drei praktischen Layout-Aufgaben: Holy Grail, Dashboard und Magazine.

Ziele dieses Moduls
  • Sie können die grundlegenden CSS Grid-Eigenschaften (grid-template-columns, grid-column, grid-row, gap) erklären und anwenden.
    Anwenden
  • Sie können vorgegebene Layout-Skizzen als CSS Grid in HTML und CSS umsetzen.
    Anwenden
  • Sie können grid-template-areas verwenden, um komplexe Layouts semantisch zu beschreiben.
    Anwenden
label
CSS GridHTMLCSSLayoutWebdesign

In diesem Modul lernen Sie das CSS Grid Layout-System kennen. Nach einer kurzen Einführung in die wichtigsten Eigenschaften setzen Sie drei verschiedene Layouts selbst um — von einfach bis anspruchsvoll.

Was ist CSS Grid?

CSS Grid ist ein zweidimensionales Layout-System. Damit können Sie Elemente in Spalten und Zeilen gleichzeitig anordnen.

Anders als bei Flexbox (das nur eine Richtung beherrscht) sind Sie mit Grid nicht auf eine Achse beschränkt. Sie definieren ein Raster — und ordnen Ihre HTML-Elemente darin an.

Warum CSS Grid lernen?

  • Fast jede moderne Website nutzt Grid fĂĽr ihr Hauptlayout
  • Responsive Design wird viel einfacher
  • Sie können komplexe Layouts mit wenig CSS erstellen

In diesem Modul lernen Sie die Grundlagen kennen und setzen dann drei verschiedene Layouts selbst um.

/* Das braucht man fĂĽr ein Grid: */

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

Note

Die wichtigsten Grid-Eigenschaften

Auf dem Container (Elternelement)

  • display: grid — aktiviert das Grid
  • grid-template-columns — definiert Spalten (z.B. 1fr 2fr 1fr)
  • grid-template-rows — definiert Zeilen
  • gap — Abstand zwischen den Zellen
  • grid-template-areas — benannte Bereiche (optional)

Auf den Kind-Elementen

  • grid-column — ĂĽber welche Spalten sich erstrecken (z.B. 1 / -1 fĂĽr volle Breite)
  • grid-row — ĂĽber welche Zeilen sich erstrecken
  • grid-area — benanntem Bereich zuweisen

NĂĽtzliche Einheiten

  • fr — «fraction», verteilt verfĂĽgbaren Platz
  • auto — passt sich dem Inhalt an
  • minmax(min, max) — flexibler Bereich
  • repeat(n, size) — wiederholt Spalten/Zeilen

Aufgabe 1: Holy Grail Layout — Header und Footer über volle Breite, 3-spaltig in der Mitte

Challenge

Aufgabe 1: Holy Grail Layout

Erstellen Sie ein klassisches Seitenlayout mit folgenden Bereichen:

  • Header — oben, ĂĽber die volle Breite
  • Navigation — links, schmal
  • Hauptinhalt — Mitte, breiteste Spalte
  • Aside — rechts, schmal (z.B. fĂĽr Widgets oder Infos)
  • Footer — unten, ĂĽber die volle Breite

Anforderungen

  • Verwenden Sie display: grid auf einem Container-Element
  • Das Layout soll die gesamte Bildschirmhöhe einnehmen
  • Hauptinhalt soll mehr Platz bekommen als Navigation und Aside
  • Verwenden Sie gap fĂĽr Abstände zwischen den Bereichen

Tipp

Denken Sie an die CSS-Eigenschaften grid-column und grid-row. Wie können Header und Footer die volle Breite einnehmen?

Aufgabe 2: Dashboard-Layout — Kacheln mit unterschiedlicher Grösse

Challenge

Aufgabe 2: Dashboard-Layout

Erstellen Sie ein Kachel-Dashboard. Die Besonderheit: Nicht alle Kacheln sind gleich gross.

Layout-Skizze (siehe Diagramm oben)

  • Eine grosse Statistik-Kachel (2 Spalten breit, 2 Zeilen hoch)
  • Eine Kalender-Kachel (1 Spalte, 2 Zeilen hoch)
  • 4 weitere kleine Kacheln (je 1x1)

Anforderungen

  • Verwenden Sie grid-column und grid-row, um die Kacheln zu positionieren
  • Geben Sie jeder Kachel eine unterschiedliche Hintergrundfarbe
  • Verwenden Sie gap fĂĽr gleichmässige Abstände

Tipp

Überlegen Sie sich: Wie drückt man «dieses Element geht von Spalte 1 bis 3» in CSS aus? Die Schreibweise ist start / end.

Aufgabe 3 (Fortgeschritten): Magazine-Layout — asymmetrisches Grid mit Hero-Element

Challenge

Aufgabe 3 (Fortgeschritten): Magazine-Layout

Dieses Layout ist anspruchsvoller — es ist asymmetrisch und hat ein dominantes Hero-Element.

Layout-Skizze (siehe Diagramm oben)

  • Ein grosses Hero-Element (2 Spalten, 2 Zeilen)
  • Zwei kleinere Artikelblöcke rechts daneben
  • Drei gleichbreite Karten unten

Anforderungen

  • Das Hero-Element soll visuell dominieren (grössere Schrift, Bild als Hintergrund)
  • Die Karten unten sollen gleichgross sein
  • Verwenden Sie grid-template-areas fĂĽr die Benennung der Bereiche

Tipp: grid-template-areas

Mit grid-template-areas können Sie Bereichen Namen geben. Das sieht dann z.B. so aus:

grid-template-areas:
  "hero hero side1"
  "hero hero side2"
  "card1 card2 card3";

Weisen Sie dann den Kind-Elementen den passenden Bereich mit grid-area: hero; zu.

Warning

Häufige Fehler

1. display: grid vergessen

Grid funktioniert nur auf dem Container-Element. Wenn Sie vergessen, display: grid zu setzen, passiert gar nichts.

2. Zeilennummer vs. Spanne verwechseln

grid-column: 1 / 3 bedeutet «von Linie 1 bis Linie 3» (also 2 Spalten). Es heisst NICHT «3 Spalten».

3. Kind- statt Container-Eigenschaften verwenden

grid-template-columns gehört auf den Container. grid-column gehört auf das Kind-Element. Diese beiden zu verwechseln ist ein klassischer Fehler.

4. fr-Einheit auf 0 Content

fr verteilt den verbleibenden Platz. Wenn alle Spalten fr verwenden und kein Inhalt da ist, kann das Layout zusammenfallen. Kombinieren Sie mit minmax() fĂĽr robustere Layouts.

Reflection

Reflexion

Denken Sie ĂĽber Ihr Lernen nach:

  • Welches der drei Layouts war am einfachsten umzusetzen? Welches am herausforderndsten?
  • Was ist der Unterschied zwischen grid-column: span 2 und grid-column: 1 / 3?
  • In welchen Situationen wĂĽrden Sie CSS Grid statt Flexbox verwenden — und umgekehrt?
  • Wie wĂĽrden Sie eines der Layouts responsive machen (fĂĽr mobile Geräte)?