Modul 8: CSS Grid

lock
Bevorstehend

Spielen Sie CSS Grid Garden, lernen Sie die wichtigsten Eigenschaften und setzen Sie ein Grid-Layout in Ihrer eigenen App um.

Ziele dieses Moduls
  • Sie können display: grid, grid-template-columns und grid-template-rows anwenden, um ein Raster zu definieren.
    Anwenden
  • Sie können einzelne Elemente mit grid-column-start/end und grid-row-start/end gezielt im Raster positionieren.
    Anwenden
  • Sie können ein CSS Grid Layout in ihrer eigenen App umsetzen.
    Anwenden

CSS Grid ist ein zweidimensionales Layout-System. In diesem Modul spielen Sie zuerst CSS Grid Garden, lernen dann die wichtigsten Eigenschaften kennen und setzen schliesslich ein Grid-Layout in ihrer eigenen App um.

CSS Grid – Was ist das?

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

Der Container (das Elternelement) bekommt display: grid. Die Kind-Elemente werden automatisch im Raster angeordnet.

  • Flexbox = eindimensional (entweder Zeile ODER Spalte)
  • Grid = zweidimensional (Zeile UND Spalte gleichzeitig)

Challenge

Aufgabe: CSS Grid Garden spielen

Bevor Sie selbst CSS schreiben, spielen Sie CSS Grid Garden:

đź”— cssgridgarden.com

Auftrag

  • Spielen Sie Level 1 bis 12
  • Achten Sie besonders auf: grid-column-start, grid-column-end, grid-row-start, grid-row-end
  • Tipp: Die Levels bauen aufeinander auf – lesen Sie die Erklärungen!

<!-- HTML-GerĂĽst fĂĽr CSS Grid Ăśbung -->
<!-- Kopieren Sie diesen Code in eine neue HTML-Datei -->

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>CSS Grid Ăśbung</title>
  <style>
    /* === HIER CSS EINTRAGEN === */

  </style>
</head>
<body>
  <div class="grid-container">
    <div id="header">Header</div>
    <div id="sidebar">Sidebar</div>
    <div id="main">Hauptinhalt</div>
    <div id="nav">Navigation</div>
    <div id="footer">Footer</div>
    <div id="widget">Widget</div>
  </div>
</body>
</html>

Note

Die wichtigsten Grid-Eigenschaften

Auf dem Container

  • display: grid – aktiviert das Grid-Layout
  • grid-template-columns: 200px 1fr 200px – definiert 3 Spalten (erste und dritte fix, mittlere flexibel)
  • grid-template-rows: auto 1fr auto – definiert Zeilen
  • gap: 16px – Abstand zwischen den Zellen

Auf den Kind-Elementen

  • grid-column-start: 1 – Element beginnt bei Spaltenlinie 1
  • grid-column-end: 4 – Element endet bei Spaltenlinie 4 (= volle Breite bei 3 Spalten)
  • grid-row-start: 2 – Element beginnt bei Zeilenlinie 2
  • grid-row-end: 4 – Element endet bei Zeilenlinie 4

Merke: Die Liniennummern beginnen bei 1, nicht bei 0! Bei 3 Spalten gibt es 4 Spaltenlinien.

/* Beispiel 1: Das Grundraster definieren */

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

/* Erklärung:
   - 3 Spalten: links 200px, mitte flexibel (1fr), rechts 200px
   - 3 Zeilen: auto (Höhe vom Inhalt), 1fr (füllt Rest), auto
   - gap: 16px Abstand zwischen allen Zellen
*/
/* Beispiel 2: Elemente gezielt positionieren */

/* Header ĂĽber die volle Breite (Linie 1 bis 4) */
#header {
  grid-column-start: 1;
  grid-column-end: 4;
}

/* Sidebar links, ĂĽber 2 Zeilen */
#sidebar {
  grid-row-start: 2;
  grid-row-end: 4;
}

/* Hauptinhalt in der Mitte */
#main {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
}

/* Navigation unter dem Hauptinhalt */
#nav {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 3;
  grid-row-end: 4;
}

/* Widget rechts, ĂĽber 2 Zeilen */
#widget {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 4;
}

/* Footer ĂĽber die volle Breite */
#footer {
  grid-column-start: 1;
  grid-column-end: 4;
}

Challenge

Aufgabe: Grid-Layout in Ihrer App umsetzen

Jetzt wenden Sie das Gelernte an! Erstellen Sie ein Grid-Layout in Ihrer eigenen App.

Auftrag

  • Verwenden Sie das HTML-GerĂĽst oben als Grundlage
  • Erstellen Sie ein Layout mit: Header (volle Breite), Sidebar (links), Hauptinhalt (Mitte), Footer (volle Breite)
  • Verwenden Sie grid-template-columns und grid-template-rows fĂĽr das Grundraster
  • Positionieren Sie Header und Footer mit grid-column-start/end ĂĽber die volle Breite

Tipp

Schauen Sie sich die beiden CSS-Beispiele oben an. Beispiel 1 zeigt das Grundraster, Beispiel 2 zeigt wie Sie einzelne Elemente positionieren.

Reflection

Reflexion

Denken Sie ĂĽber Ihr Lernen nach:

  • Was ist der Unterschied zwischen grid-column-start: 1; grid-column-end: 4; und grid-column: span 3;?
  • Wann wĂĽrden Sie CSS Grid statt Flexbox verwenden — und umgekehrt?
  • Was passiert, wenn Sie display: grid vergessen?