Modern CSS Layout
summary
Overview of concrete techniques and what actually works now: use one-line aspect-ratio plus object-fit to avoid padding hacks, build responsive grids with grid auto-fill + minmax then improve them with container queries (Chrome stable, Safari TP, polyfill available) to switch columns or change card direction, size text with container units so cards scale to their container, align nested items with subgrid, and use :has for parent-aware tweaks. Demos show these patterns functioning today though support is still partial across browsers.
AI-written summary · about
chapters (14)
- 0:00Introduction to modern CSS
- 1:44Evolution of CSS layout
- 3:13Intrinsic web design explained
- 5:26Flexbox vs Grid for layouts
- 9:10Aspect ratio and object fit
- 14:05Min, max and clamp functions
- 18:45Fluid typography with clamp
- 20:09Responsive grid systems
- 24:08Container queries introduction
- 28:24Container units and responsive cards
- 34:12Subgrid and parent selector
- 37:34Odd number grid item styling
- 40:31Browser support and future features
- 41:02Q&A session
