Layout
Flexbox und Grid sind die modernen Layout-Systeme: Flexbox für Reihen und Spalten, Grid für zweidimensionale Raster.
Ansicht
01
Verstehen
Lies die Kernidee und das Beispiel.
02
Prüfen
Beantworte die Aktiv-Checks.
03
Anwenden
Setze die Transferaufgabe um.
Lerninhalt
Verstehen & anwenden
display und position
display bestimmt das grundlegende Layoutverhalten: block, inline, flex, grid oder none.
position steuert Sonderfälle: relative verschiebt relativ zur Normalposition, absolute relativ zum positionierten Vorfahren, fixed relativ zum Viewport und sticky haftet beim Scrollen.
header {
position: sticky;
top: 0;
}Flexbox
display: flex ordnet Kinder in einer Reihe oder Spalte an.
justify-content richtet entlang der Hauptachse aus, align-items entlang der Querachse.
gap definiert den Abstand zwischen den Items, ohne margin-Tricks.
.container {
display: flex;
justify-content: center;
align-items: center;
gap: 16px;
}Grid
display: grid spannt ein zweidimensionales Raster auf.
grid-template-columns definiert die Spalten, die fr-Einheit verteilt den freien Platz.
Mit repeat() und minmax() entstehen flexible Raster, die sich an den Platz anpassen.
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}Vertiefung
Flexbox für Linien, Grid für Flächen
Flexbox verteilt Elemente entlang einer Hauptachse. Grid definiert Zeilen und Spalten gleichzeitig. Beide Systeme ergänzen sich: Grid für das Seitenraster, Flexbox für die Ausrichtung innerhalb einer Karte.
gap ersetzt Margin-Tricks. minmax() und auto-fit machen Grids flexibel, ohne für jeden Breakpoint eine neue Spaltenzahl zu schreiben.
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: 1rem;
}
.card {
display: flex;
flex-direction: column;
justify-content: space-between;
}Merksatz: Grid ordnet die Fläche, Flexbox ordnet die Inhalte. gap hält Abstände sauber.
Übungsaufgabe
Responsives Kartenlayout
Baue ein Raster aus drei Karten. Das Raster soll ohne Media Query umbrechen, die Karten sollen ihren Button unten ausrichten.
Das soll dein Programm können
- display: grid mit auto-fit und minmax
- gap für Abstände
- Karten als Flex-Spalte
- Button am unteren Rand
- Keine feste Höhe für die Karten
Schreibe den Code hier oder in deiner IDE und vergleiche ihn dann mit der Lösung.
Dein Code wird automatisch auf diesem Gerät gespeichert.
Hinweis anzeigen
repeat(auto-fit, minmax(16rem, 1fr)) erzeugt so viele Spalten, wie Platz haben. Für den Button: margin-top: auto.
Lösung anzeigen
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: 1rem;
}
.card {
display: flex;
flex-direction: column;
gap: 0.75rem;
padding: 1.25rem;
border: 1px solid #cbd5e1;
border-radius: 0.75rem;
}
.card__button {
margin-top: auto;
align-self: flex-start;
}Warum funktioniert das?
auto-fit passt die Spaltenzahl an den verfügbaren Platz an. margin-top: auto schiebt den Button in der Flex-Spalte nach unten, ohne feste Höhen.
Aktiv-Check
Teste dein Verständnis
Erkennen: Welcher Abschnitt passt?
Welcher Abschnitt passt zu diesen Begriffen?
Transfer
Mini-Projekt: Eine Karte gestalten
Gestalte eine Karte mit Bild, Titel, Text und Button. Ändere anschließend nur die Schriftgröße im Browser und prüfe, ob sie stabil bleibt.
Selbstcheck
Kann ich das schon?
Hake ab, was du wirklich erklären oder selbst bauen könntest.
Fortschritt
Bereit zum Abschließen?
Markiere die Lektion als abgeschlossen, um XP und Streak zu erhalten.