Intro

Was ihr nach diesem Kapitel können solltet

Im CSS-Kapitel habt ihr ein Design einspaltig nachgebaut - Farben, Schriften, Abstände, aber ohne mehrspaltiges Layout. Jetzt kommt der fehlende Baustein dazu.

Ein sauberes Design-System als CSS-Variablen anlegen - die Grundlage für Dark Mode und Responsive Design
Elemente mit fortgeschrittenen Selektoren gezielt auswählen: Attribut-Selektoren, :nth-child(), Pseudo-Elemente, :has()
Elemente mit position gezielt verschieben, fixieren oder übereinander legen (relative, absolute, fixed, sticky, z-index)
Flexbox einsetzen, um Elemente in einer Richtung anzuordnen (Reihe oder Spalte) - z.B. für Navigationsleisten, Card-Reihen, zentrierte Inhalte
CSS Grid einsetzen, um ein zweidimensionales Raster aus Zeilen und Spalten zu bauen - z.B. für ein Seiten-Layout mit Header, Sidebar, Content, Footer
Entscheiden können, wann Flexbox und wann Grid die bessere Wahl ist

Bisher: einspaltig, mit fixer Reihenfolge von oben nach unten (Normal Flow) Jetzt: mehrspaltig, mit Kontrolle über Zeilen UND Spalten

Recap: der Normal Flow

Ohne display: flex oder display: grid ordnet der Browser Elemente im Normal Flow an - das kennt ihr schon aus dem display-Abschnitt des CSS-Kapitels:

Normal Flow auf Laptop und Smartphone

Block-Elemente (div, section, p, …) stehen untereinander
Inline-Elemente (span, a, …) fließen nebeneinander im Text
Die Reihenfolge im HTML bestimmt die Reihenfolge auf der Seite - eine Spalte, die auf schmalen wie breiten Bildschirmen einfach unterschiedlich lang ist