Die HTML-/CSS-Dateien für die Übungen finden Sie hier: cssgrid2-abstaende-uebungsdateien.zip

In der Folge »CSS-Grid 2 - Abstände und Ausrichtungen« habe ich die folgenden Anweisungen erklärt, die Sie jetzt üben sollen:

  • gap - Erzeugt einen Abstand zwischen allen Boxen des Grids; mit grid-column-gap bzw. grid-row-gap können die horizontalen bzw. vertikalen Abstände separat definiert werden.
  • justify-content gibt an, wo in der umgebenden Grid-Box die inneren Boxen auf der horizontalen Achse sitzen (rechts-links); align-content gibt an, wo die Boxen in der Vertikalen (oben-unten) sitzen. Ich erkläre die Werte start, end, center und space-around. Eine Übersicht über gängige Angaben zeigt dieses Bild.

Die Übungen finden Sie unten auf dieser Seite.

Die HTML-/CSS-Dateien für die Übungen finden Sie hier: cssgrid2-abstaende-uebungsdateien.zip

Übungen

Alle Übungen finden Sie in der Materialsammlung (dort auch alle zusätzlichen Dateien wie Bilder, Klassendiagramme oder HTML-Vorlagen!).

Die aktuelle Übung können Sie hier als txt-File herunterladen.


***** Ü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: 03css/cssgrid2-abstaende-uebungsdateien.zip

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:
03css/cssgrid1-grundlagen-uebung-loesungsvorschlag-screenshot.jpg