CSS-Grid 2: Übungen zu Ausrichtung und Abständen (mit Lösungen)
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; mitgrid-column-gapbzw.grid-row-gapkönnen die horizontalen bzw. vertikalen Abstände separat definiert werden.justify-contentgibt an, wo in der umgebenden Grid-Box die inneren Boxen auf der horizontalen Achse sitzen (rechts-links);align-contentgibt an, wo die Boxen in der Vertikalen (oben-unten) sitzen. Ich erkläre die Wertestart,end,centerundspace-around. Eine Übersicht über gängige Angaben zeigt dieses Bild.
Die Übungen finden Sie unten auf dieser Seite.
Beim Laden werden Daten an YouTube (Google) übertragen. · Auf YouTube ansehen
Die HTML-/CSS-Dateien für die Übungen finden Sie hier: cssgrid2-abstaende-uebungsdateien.zip
Übungen
Zusätzliche Dateien (Bilder, Klassendiagramme, HTML-Vorlagen) finden Sie in der Materialsammlung. Diese Übungen können Sie als txt-Datei 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
