CSS-Grid 1: Übungen zu den Grundlagen (mit Lösungen)
Die HTML-/CSS-Dateien für die Übungen finden Sie hier: cssgrid1-grundlagen-uebungen-dateien.zip
Wie in der letzten Folge erklärt geht es hier um die Anwendung folgender Befehle:
display: grid- macht aus einem Blockelement (einem div, einem nav, einem main …) ein "Grid", also ein Raster, in dem wir Blockelemente über- und nebeneinander anordnen können. Alle direkten Kind-Elemente werden zu Grid-Elementen.grid-template-columns: …undgrid-row-columns: …- Damit geben wir an, wie viele Blöcke sich in einer Zeile bzw. in einer Spalte befinden und wie breit sie sind. Hier kommt auch gerne malrepeat(…)zum Einsatz.
Beim Laden werden Daten an YouTube (Google) übertragen. · Auf YouTube ansehen
Die HTML-/CSS-Dateien für die Übungen finden Sie hier: cssgrid1-grundlagen-uebungen-dateien.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 1 - Grundlagen
Küchenutensilien: Einfache Arbeit mit CSS-Grid
Benutzen Sie die HTML-/CSS-/Bild-Dateien im Zip-Archiv hier: 03css/cssgrid1-grundlagen-uebungen-dateien.zip
Es geht in dieser Übung nur um die HTML-Datei 1-1-kuchen-grundlagen.html und die zugehörigen CSS-/Bilddateien.
SIE MÜSSEN NUR IN DER CSS-DATEI ÄNDERUNGEN VORNEHMEN. IN DER HTML-DATEI MÜSSEN SIE NICHTS(!!) ÄNDERN.
1. Orientieren Sie sich in der HTML-Datei und identifizieren Sie die Klassen, die für das Grid verantwortlich sind.
2. Spielen Sie mit den Möglichkeiten herum und ordnen Sie die Boxen in verschiedenen Konstellationen an, z. B.
a) 2 x 2 Grid (also 2 Spalten, 2 Zeilen).
b) 4 x 1 Grid (4 Spalten in 1 Zeile - Wenn Sie mit px-Angaben arbeiten, passt das evtl. nicht auf Ihren Bildschirm. Arbeiten Sie deshalb mit Prozent (4 Boxen in 100% gibt wie viel Prozent pro Box, hm?)).
c) 1 x 4 Grid (1 Spalte, 4 Zeilen, wobei die Zeilen unterschiedliche Höhe haben - »zwingen« Sie die erste Zeile auf eine knappe Höhe)
Experimentieren Sie auch mit repeat!
3. Designen Sie die Boxen ein wenig (z.B. mit einem Rahmen drumrum, andere Hintergrundfarbe etc.).
Die Lösungen könnten etwa so aussehen:
03css/cssgrid1-grundlagen-uebung-loesungsvorschlag-screenshot.jpg
