***** Übungen: CSS-Grid 1 - Grundlagen *****

Küchenutensilien: Einfache Arbeit mit CSS-Grid

Benutzen Sie die HTML-/CSS-/Bild-Dateien im Zip-Archiv hier: *LINK 03css/cssgrid1-grundlagen-uebungen-dateien.zip LINK*

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

@@@