Modern CSS Layout is Awesome!
summary
Demos show concrete outcomes: a card grid that uses container queries to change column count and make the first item span two columns, responsive font sizing via container units, and an example where animated grid tracks slide panels without JavaScript — it works in modern browsers. Practical utilities covered include subgrid for aligning nested rows (partial support; add fallbacks) and :has() pseudo-class for parent-aware styling. Uses aspect-ratio, inset, and new viewport/container units with real fallbacks and browser caveats.
AI-written summary · about
chapters (13)
- 0:00Modern CSS layout intro
- 4:25Aspect ratio for proportions
- 7:13Grid gaps and spacing
- 9:46Viewport units for sizing
- 13:25Overlaying without absolute
- 16:40Intrinsic sizing keywords
- 19:12Subgrid for nested alignment
- 23:12Viewport media query limits
- 28:45Container queries for components
- 33:27Container queries with clamp
- 38:00Container units and fallbacks
- 39:26CSS :has selector
- 41:49Demo combining modern CSS
