***** Übungen: CSS-Grid 2 - Abstände und Ausrichtungen *****

Rezept für einen Apfelkuchen auf einer Webseite

Benutzen Sie die HTML-/CSS-/Bild-Dateien im Zip-Archiv hier: *LINK 03css/cssgrid2-abstaende-uebungsdateien.zip LINK*

Sie arbeiten in dieser Übung lediglich mit der CSS-Datei (css/style.css). Die Webseite wird von der HTML-Datei 2-rezept-apfelkuchen.html dargestellt.

SIE MÜSSEN NUR IN DER CSS-DATEI ÄNDERUNGEN VORNEHMEN. IN DER HTML-DATEI MÜSSEN SIE NICHTS(!!) ÄNDERN.

1. Abstände und Größen
1a. Erzeugen Sie aus den Zutatenboxen ein 3x4-Grid.
1b. Die erste Zeile soll etwas höher sein als die folgenden.
1c. Zwischen allen Boxen soll ein Abstand von 20 Pixel sein.
1d. Versuchen Sie, alle Boxen möglichst klein zu machen, so dass aber der Inhalt (Bilder, Texte) noch reinpasst (EINE CSS-Klasse ändern für alle Boxen - nicht die Boxen einzeln bearbeiten!)
1e. Spielen Sie mit den Abständen. Bspw. verändern Sie das Grid so, dass die vertikalen Abstände zwischen den Zeilen kleiner sind als die horizontalen zwischen den Spalten.

2. Ausrichtung
Maximieren Sie die Größe Ihres Browserfensters, damit Sie möglichst viel Platz haben, die Boxen anzuordnen.

Beachten Sie, dass im aktuellen Layout eine vertikale Ausrichtung nicht sichtbar ist (da der äußere div-Container sich an den Inhalt anpasst - d.h. er "schmiegt" sich an die Anzahl der Zeilen an).

2a. Richten Sie das Grid aus Aufgabe 1 zentriert aus.
2b. Versuchen Sie die space-Eigenschaften zu vergeben (space-around, space-between, space-evenly)
2c. Erzeugen Sie ein 2x6 Grid und probieren Sie aus, wie die unterschiedliche justify-content-Angaben sich auf das Layout auswirken.

3. Neues Grid

Erzeugen Sie ein neues Grid ÜBER dem kuchenrezept-Container. Dort haben Sie 4 Boxen, in denen jeweils lediglich ein Wort steht:
Geduld
Hitze
Zucker
Fett

Sie müssen eigene Klassennamen vergeben; falls Ihnen die Kreativität fehlt, nennen Sie die äußere Klasse einfach .gridContainer, die inneren Boxen bekommen die Klasse .boxenSchlagwoerter o.ä.
Stylen Sie das Grid und die Boxen SCHÖN. Benutzen Sie gerne einen CSS-Box-Shadow-Generator, z. B. https://html-css-js.com/css/generator/box-shadow/

Die Lösungen könnten etwa so aussehen:
*LINK 03css/cssgrid1-grundlagen-uebung-loesungsvorschlag-screenshot.jpg LINK*

@@@