Creative CSS Layout
summary
Shows concrete recipes: uses Grid, Flexbox, aspect-ratio replaces the padding‑hack for image squares, demonstrates a concertina grid (fr + max widths) and card/grid variants, and uses min/max/clamp + custom properties for fluid spacing. Demos run into reality: subgrid works in Firefox, container queries are landing but container queries still patchy (container units experimental; Chrome issues), gap in flexbox is now supported, and fallbacks via feature queries keep layouts usable.
AI-written summary · about
chapters (19)
- 0:00Creative CSS layout intro
- 2:11Why CSS layout is exciting now
- 4:18Flexbox vs grid for layouts
- 9:59Flexbox for menus and headers
- 11:24Grid for 2D and directed layouts
- 12:47Concertina grid breaking wrappers
- 14:13Aspect ratio for responsive designs
- 17:44Grid vs flexbox for images and cards
- 19:56Flexible grids with gap and fr units
- 21:40Container queries for components
- 26:09Implementing container queries
- 30:25Fluid typography with clamp and min
- 34:15Why fluid layouts make sense
- 35:41Container units for components
- 37:52Subgrid for nested alignment
- 41:01Parent selector :has for layouts
- 42:26Quantity queries and grid packing
- 44:11Embracing fluidity in design
- 45:34Q&A
