← Zurück zur Übersicht

A12 – Grid: Seitenlayout aufbauen

🎯 Lernziel: Du kannst mit CSS Grid ein zweidimensionales Seitenlayout mit Header, Sidebar, Inhalt und Footer erstellen.

Referenz im Kurs: → Beispiel b_25_grid.html

Grid-Layout kurz erklärt

Während Flexbox eine Achse (entweder horizontal oder vertikal) organisiert, kann CSS Grid zweidimensional – also gleichzeitig in Reihen und Spalten – layouten. Ideal für Seitenlayouts:

header
sidebar
main content
footer

Aufgabe A12

Teil A – Layout für wasser.html

Baue ein Seitenlayout mit Grid für deine wasser.html. Die Seite soll folgende Bereiche haben:

HTML-Struktur:

<body>
    <header>
        <h1>Wasser</h1>
        <nav>…</nav>
    </header>

    <main>
        <aside>
            <h3>Steckbrief</h3>
            <ul>
                <li>Formel: H<sub>2</sub>O</li>
                <li>Siedepunkt: 100&nbsp;&deg;C</li>
                <li>Schmelzpunkt: 0&nbsp;&deg;C</li>
                <li>Dichte: 1&nbsp;kg/l</li>
            </ul>
        </aside>

        <article>
            <h2>Was ist Wasser?</h2>
            <p>…</p>
            <figure>…</figure>
        </article>
    </main>

    <footer>
        <p>Quelle: Wikipedia, Artikel „Wasser"</p>
    </footer>
</body>

CSS für das Grid-Layout:

body {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-areas:
        "header  header"
        "sidebar content"
        "footer  footer";
    gap: 1.5em;
    max-width: 900px;
    margin: 0 auto;
    padding: 1em;
}

header  { grid-area: header; }
aside   { grid-area: sidebar; }
article { grid-area: content; }
footer  { grid-area: footer; }

Teil B – Foto-Galerie für wasser.html

Füge im <article> eine Foto-Galerie mit Grid ein:

.galerie {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.8em;
    margin: 1.5em 0;
}

.galerie img {
    width: 100%;
    height: 150px;
    object-fit: cover;  /* Bild füllt die Fläche ohne Verzerrung */
    border-radius: 4px;
}
<div class="galerie">
    <img src="bilder/wasser1.jpg" alt="…">
    <img src="bilder/wasser2.jpg" alt="…">
    <img src="bilder/wasser3.jpg" alt="…">
</div>

Falls du noch nicht drei Bilder hast, besorge dir weitere von Wikimedia Commons.

💡 Grid vs. Flexbox – wann was?
Flexbox → eine Dimension: Elemente in einer Reihe oder Spalte anordnen (Navigation, Button-Gruppen, Karten nebeneinander)
Grid → zwei Dimensionen: komplexe Layouts mit Zeilen und Spalten (Seitenlayout, Galerien, Dashboards)

Man kann beide kombinieren: Grid für das Gesamt-Layout, Flexbox für Komponenten darin.

Zusatzaufgabe

Übertrage das Grid-Layout auf die restlichen 3 Elementseiten.
Passe dabei die Sidebar jeweils inhaltlich an das Element an:

🔥 feuer.html – Sidebar: „Feuer auf einen Blick" mit Zündtemperaturen verschiedener Materialien (Papier, Holz, Benzin) als Liste, darunter ein kleines Bild einer Flamme (z.B. von Wikimedia Commons).

🪨 erde.html – Sidebar: „Bodenarten" als kompakte Liste mit den Korngrößen aus Aufgabe A04 (Kies, Sand, Schluff, Ton), plus ein Bild von Bodenprofil-Schichten oder verschiedenen Gesteinsarten.

💨 luft.html – Sidebar: „Zusammensetzung der Luft" – die Kurzform der Tabelle aus A06 als kompakte Liste (N₂ 78 %, O₂ 21 %, Ar 1 %, …), ohne ein eigenes Bild (Luft ist unsichtbar – das kann man als Witz/Hinweis in der Sidebar vermerken).