CSS-Grid 1: Übungen zu den Grundlagen (mit Lösungen)


(letzte Änderung an dieser Seite: 26.03.2020)

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: … und grid-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 mal repeat(…) zum Einsatz.

Die HTML-/CSS-Dateien für die Übungen finden Sie hier: cssgrid1-grundlagen-uebungen-dateien.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 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




Nach oben