Zusammenfassung

Flexbox: display: flex, eindimensional - flex-direction, justify-content (Hauptachse), align-items (Querachse), flex-wrap, gap, flex-grow/flex-shrink/flex-basis
CSS Grid: display: grid, zweidimensional - grid-template-columns/grid-template-rows, die Einheit fr, repeat(), grid-template-areas/grid-area, subgrid
Flexbox vs. Grid: eine Richtung → Flexbox, Zeilen und Spalten gleichzeitig → Grid - meistens werden beide kombiniert
<details>/<summary>: aufklappbare Bereiche ganz ohne JavaScript, inkl. exklusiver Gruppen über name
<dialog>: echte modale Fenster mit showModal(), automatischem ::backdrop, Esc-Taste und <form method="dialog">
popover: schwebende Elemente ganz ohne z-index, mit automatischem Light-Dismiss (popover="auto") oder manueller Kontrolle (popover="manual")
Weitere Werkzeuge: aspect-ratio für feste Seitenverhältnisse, clamp()/min()/max() für fließende Größen, scroll-snap für einrastende Scroll-Galerien

Vertiefung