Flexbox-Feinheiten, CSS Grid und Responsive Design — die drei Werkzeuge, mit denen professionelle Layouts entstehen.
In A4 habt ihr die Basics kennengelernt: display: flex, justify-content, align-items. Jetzt geht es ans Eingemachte: Wie verhalten sich die einzelnen Kinder im Flex-Container?
Bestimmt, wie viel Platz ein Element vom verfügbaren Restplatz bekommt.
↓ Klick für Details
Standardwert: 0 — das Element wächst nicht.
Setzt man flex-grow: 1 auf alle Kinder, teilen sie den Restplatz gleichmäßig. Ein Kind mit flex-grow: 2 bekommt doppelt so viel Restplatz wie eines mit flex-grow: 1.
Merke: flex-grow verteilt nur den übrigen Platz — nicht die Gesamtbreite!
Bestimmt, wie stark ein Element schrumpft, wenn der Container zu klein wird.
↓ Klick für Details
Standardwert: 1 — Elemente schrumpfen gleichmäßig.
Mit flex-shrink: 0 verhinderst du, dass ein Element schrumpft (z.B. für eine fixe Sidebar). flex-shrink: 2 schrumpft doppelt so schnell wie flex-shrink: 1.
Typisch: Navigation mit fester Breite (shrink: 0) + Inhaltsbereich (shrink: 1).
Die „ideale Startgröße" eines Elements, bevor grow/shrink greifen.
↓ Klick für Details
Standardwert: auto — nutzt die natürliche Breite (Inhalt oder width).
Man kann z.B. flex-basis: 300px setzen — das Element startet bei 300px und wird dann per grow/shrink angepasst.
Die Kurzform flex: 1 1 300px bedeutet: grow=1, shrink=1, basis=300px.
Die Kurzschreibweise für grow, shrink und basis in einer Zeile.
↓ Klick für Details
flex: 1 = flex: 1 1 0% — wächst und schrumpft gleichmäßig, Startgröße 0.
flex: 0 0 250px — fixe 250px, wächst und schrumpft nicht.
flex: 2 1 auto — bekommt doppelten Restplatz, schrumpft normal, Startgröße = Inhalt.
Pro-Tipp: In der Praxis nutzt man fast immer die Shorthand statt der Einzeleigenschaften.
Ändere flex-grow, flex-shrink und flex-basis für jedes Kind und sieh, wie sich das Layout verändert.
Versuche zuerst, die Lösung im Kopf zu finden — dann deckst du auf.
Drei Spalten: Sidebar (200px fix), Hauptinhalt (wächst), Sidebar rechts (150px fix). Wie sieht das CSS für die drei Kinder aus?
Vier Boxen. Box 3 soll doppelt so viel Restplatz bekommen wie die anderen. Alle sollen bei 100px starten.
Flexbox ist eindimensional — eine Achse. CSS Grid arbeitet zweidimensional: Zeilen und Spalten gleichzeitig. Damit baut man komplexe Seitenlayouts, die mit Flexbox allein schwierig wären.
Definiert Anzahl und Breite der Spalten.
↓ Klick für Details
grid-template-columns: 200px 1fr 1fr — eine fixe Spalte (200px) + zwei flexible.
grid-template-columns: repeat(3, 1fr) — drei gleichbreite Spalten.
fr = „fraction" — teilt den verfügbaren Platz proportional auf.
Definiert die Höhe der Zeilen.
↓ Klick für Details
grid-template-rows: 80px auto 60px — Header (80px), Inhalt (passt sich an), Footer (60px).
Mit minmax(100px, auto) setzt man eine Mindest- und Maximalhöhe.
Abstand zwischen Zeilen und Spalten.
↓ Klick für Details
gap: 16px — gleicher Abstand überall.
gap: 20px 10px — 20px zwischen Zeilen, 10px zwischen Spalten.
Funktioniert auch bei Flexbox! Ersetzt margin-Hacks.
Bestimmt, welche Zellen ein Element einnimmt.
↓ Klick für Details
grid-column: 1 / 3 — spannt von Linie 1 bis Linie 3 (= 2 Spalten).
grid-column: span 2 — kürzer: „nimm 2 Spalten ein".
grid-row: 1 / -1 — von der ersten bis zur letzten Zeile.
Verändere Spalten, Zeilen und Gap — sieh sofort, wie sich das Grid anpasst.
Statt mit Zeilennummern zu arbeiten, kannst du Bereiche benennen — wie ein Grundriss:
Für responsive Grids ohne Media Queries — die magische Zeile:
Eine Website muss auf dem Handy genauso gut funktionieren wie auf dem Desktop. Responsive Design passt das Layout automatisch an — mit Media Queries, flexiblen Einheiten und cleverem CSS.
Man schreibt zuerst das CSS für die kleinste Ansicht, dann erweitert man per min-width nach oben. Das ist effizienter, weil Mobile weniger Regeln braucht.
CSS-Regeln, die nur unter bestimmten Bedingungen gelten.
↓ Klick für Details
@media (min-width: 640px) { ... } — ab 640px Breite aktiv.
@media (max-width: 1024px) { ... } — bis 1024px aktiv.
Man kann auch kombinieren: @media (min-width: 640px) and (max-width: 1024px)
Typische Breakpoints: 480px (Phone), 640px (Tablet), 1024px (Desktop).
rem, em, vw, vh, % — statt starrer Pixelwerte.
↓ Klick für Details
rem — relativ zur Schriftgröße von <html> (meist 16px).
vw / vh — 1% der Viewport-Breite / -Höhe.
% — relativ zum Elternelement.
clamp(1rem, 4vw, 3rem) — Minimum, Ideal, Maximum in einer Zeile!
Ohne dieses Tag funktioniert Responsive auf dem Handy nicht.
↓ Klick für Details
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Sagt dem Browser: „Nutze die echte Bildschirmbreite, nicht eine simulierte Desktop-Breite."
Fehlt in A1 — aber ihr habt ihn alle schon in euren Dateien!
Klicke auf die Ansichten und beobachte, wie das gleiche Grid reagiert:
Ordne die CSS-Layout-Methoden nach ihrer Einführung in den CSS-Standard — von der ältesten zur neuesten.
7 Fragen — teste dein Wissen aus dieser Einheit.
Klicke auf eine Karte, um die Definition aufzudecken.
„Öffnet eure bisherigen JIA-Projekte und die DevTools (F12). Findet heraus: Wo würde ein Grid-Layout euren Code vereinfachen? Refactored eine Stelle von Flexbox zu Grid — oder umgekehrt. Begründet eure Entscheidung."