Lernziel
Du verstehst den Unterschied zwischen Flexbox und Grid auf Einsteiger-Niveau.
HTML & CSS | Intermediate
CSS Grid-Grundlagen
Zweidimensionale Layouts mit CSS Grid umsetzen.
Grid-Beispiel
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}Drag-Aufgabe
Baue eine einfache Grid-Regel mit den wichtigsten Bausteinen nach. So merkst du dir besser, wie Spalten und Abstaende notiert werden.
Bausteine
Baustein ziehen oder anklicken, dann in eine Luecke setzen.
Live-Beispiel
Karte A
Karte B
Karte C
Karte D
Praxis
Grid ist besonders nützlich für Seitenraster, Kartenübersichten und komplexere Layouts.