HTML5 & CSS3 – Einführungskurs

Übung 3: Responsive Fotogalerie

Eine Bildergalerie mit variablen Zellgrößen – Layout mit CSS Grid

CSS Grid Media Queries Google Fonts object-fit CSS Transitions

Ziel der Übung

Du erstellst eine responsive Fotogalerie, bei der einzelne Bilder mehr Platz einnehmen als andere – ähnlich wie man es von Pinterest oder Bildagenturen kennt. Das gesamte Layout wird mit CSS Grid umgesetzt.

Das Besondere: Du bestimmst nicht selbst, wo jedes Bild im Raster landet. CSS Grid platziert die Elemente automatisch – du gibst nur vor, wie viele Zellen ein Bild überspannen soll.

.gross
(span 2 × span 2)
.hoch
(span 2)
normal
normal
normal
normal
.hoch
normal
normal

So sieht das fertige Grid-Layout schematisch aus (Desktop, 3 Spalten).

Hinweis: Das komplette CSS kommt in die externe Datei css/galerie.css. Im <style>-Tag in der HTML-Datei steht kein CSS.

1Dateien ergänzen

Lege die folgenden Dateien in den Ordnern aus den vorigen Übungen an:

TAG3/
  ├── galerie.html
  └── css/
      └── galerie.css

In galerie.html kommt die HTML-Struktur.
In css/galerie.css kommt das gesamte CSS.

2HTML-Struktur

Kopfbereich (<head>)

Binde im <head> nur die externe CSS-Datei ein. Die beiden Google Fonts Playfair Display und Source Sans 3 werden nicht per <link> im HTML geladen, sondern per @import direkt am Anfang der galerie.css (dazu mehr in Abschnitt 4): 

<!-- Externe CSS-Datei (der @import für die Fonts steht darin) -->
<link rel="stylesheet" href="css/galerie.css">

Seitenaufbau (<body>)

Der Body besteht aus zwei Elementen: einem <header> mit Überschrift und einem <main>, das den Galerie-Container enthält. Jedes Bild wird als <figure> mit <img> und <figcaption> angelegt. Alle zehn Bilder aus der Tabelle oben werden so eingebaut:

<header>
    <h1><i>Meine</i> Galerie</h1>
    <p>Responsive Layout mit CSS Grid</p>
</header>

<main>
    <div class="galerie">

        <!-- Dieses Muster für alle 10 Bilder wiederholen.
             Je nach gewünschter Anzeigegröße die Klasse
             class="gross"  (2 Spalten × 2 Zeilen)  oder
             class="hoch"   (1 Spalte  × 2 Zeilen)  vergeben.
             Normale Bilder brauchen keine class.
             Im CSS müssen die Selektoren .gross und .hoch
             um die entsprechenden Deklarationen ergänzt werden. -->
        <figure>
            <img src="URL" alt="Beschreibung">
            <figcaption>Titel</figcaption>
        </figure>

        <!-- ... weitere figure-Elemente -->

    </div>
</main>

3Bild-URLs

Die Bilder kommen vom kostenlosen Dienst picsum.photos. Füge alle zehn Bilder als <figure>-Elemente in den .galerie-Container ein. Die URL-Struktur ist immer: https://picsum.photos/id/[Nummer]/[Breite]/[Höhe]

4CSS – Basis-Styling (galerie.css)

Dieser Block sorgt für das allgemeine Aussehen der Seite: Hintergrundfarbe, Schrift, Header und den Hover-Effekt auf den Bildern. Er ist fertig vorgegeben – du kannst ihn direkt in deine galerie.css übernehmen und danach das Grid-CSS ergänzen. 

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Source+Sans+3:wght@300;400&display=swap');

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

body {
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 300;
    background: #111;
    color: #eee;
    min-height: 100vh;
}

header {
    text-align: center;
    padding: 2.5em 1em 1.5em;
}

header h1 {
    font-family: 'Playfair Display', serif;
    font-size: 2.8em;
    font-weight: 700;
    margin-bottom: 0.3em;
}

header h1 i {
    /* <i> hier als kursiv-Tag, nicht als Icon */
    font-style: italic;
    font-weight: 400;
    color: #aaa;
}

header p {
    color: #888;
    letter-spacing: 0.08em;
    font-size: 0.9em;
    text-transform: uppercase;
}

main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1em 1.5em 4em;
}

figure {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    cursor: pointer;
}

figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* Bild füllt die Zelle, ohne verzerrt zu werden */
    display: block;
    transition: transform 0.5s ease;
}

figure:hover img {
    transform: scale(1.08);  /* leichter Zoom beim Hover */
}

figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.72));
    padding: 2em 0.9em 0.7em;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    color: #fff;
    opacity: 0;            /* erst unsichtbar … */
    transition: opacity 0.3s;
}

figure:hover figcaption {
    opacity: 1;            /* … und erscheint beim Hover */
}

5CSS Grid – Layout der Galerie

Das ist der Kern der Aufgabe. Ergänze folgende Regeln am Ende deiner galerie.css:

Schritt 5a – Grundraster (3 Spalten)

Mache .galerie zum Grid-Container. Mit grid-template-columns legst du fest, wie viele Spalten es gibt und wie breit sie sind. grid-auto-rows bestimmt die Höhe jeder Zeile – alle Zeilen sind gleich hoch: 

.galerie {
    /* Schalte den Grid-Modus ein,
       definiere 3 gleich breite Spalten mit repeat() und der Einheit fr,
       setze grid-auto-rows auf eine feste Zeilenhöhe in px,
       und füge einen Abstand zwischen den Zellen hinzu (gap). */
}

Schritt 5b – Bilder überspannen mehrere Zellen

Mit span sagst du CSS Grid, dass ein Element mehr als eine Zelle belegen soll. Das große Bild soll 2 Spalten und 2 Zeilen belegen, das hohe Bild nur 2 Zeilen: 

.gross {
    /* Gib an, dass dieses Bild 2 Spalten und 2 Zeilen einnehmen soll.
       Verwende grid-column und grid-row mit dem Schlüsselwort span. */
}

.hoch {
    /* Gib an, dass dieses Bild 2 Zeilen einnehmen soll (Breite: normal). */
}

6Responsive Design – Media Queries

Auf kleineren Bildschirmen funktioniert das 3-Spalten-Grid nicht mehr gut. Mit Media Queries passt du das Layout an verschiedene Bildschirmbreiten an. Füge diese Blöcke ans Ende deiner galerie.css:

Ab 900 px: 2 Spalten, kein Spanning

Bei mittlerer Breite reduzierst du auf 2 Spalten. Damit das Layout nicht durcheinander gerät, deaktivierst du das Spanning für .gross und .hoch: 

@media (max-width: 900px) {
    .galerie {
        /* Ändere das Grid auf 2 Spalten und passe grid-auto-rows an. */
    }

    .gross {
        /* .gross soll jetzt noch 2 Spalten breit sein,
           aber nur noch 1 Zeile hoch. */
    }

    .hoch {
        /* .hoch soll kein Spanning mehr haben (1 Zeile). */
    }
}

Ab 480 px: 1 Spalte

Auf sehr kleinen Bildschirmen (Smartphone) wird alles einzeilig angezeigt. Das Spanning muss vollständig aufgehoben werden: 

@media (max-width: 480px) {
    .galerie {
        /* Ändere das Grid auf 1 Spalte und passe grid-auto-rows an. */
    }

    .gross {
        /* .gross soll kein horizontales Spanning mehr haben (1 Spalte). */
    }
}

CSS-Eigenschaften in dieser Übung

Folgende Eigenschaften werden hier u.a. eingesetzt, manche davon sind eventuell neu:

Für mehr Hintergrundwissen zu den neuen CSS-Eigenschaften lese in einer Referenz nach (z.B. W3Schools)