The Magic You Have Been Missing in CSS Layouts
summary
Shows concrete code for layouts that actually shipped: a CSS-only carousel built with hacks in 2016, responsive forms that resize without media queries using Flexbox repeat(auto-fill, minmax(...)), and grids that reflow based on container size with grid-template-areas. Mentions browser support since 2017 and an uptake metric of 35% of page loads. Demos use Flexbox properties like flex-basis, new features like :has(), aspect-ratio and clamp(), and visual outcomes that do or don’t work as shown.
AI-written summary · about
chapters (14)
- 0:00Introduction
- 5:04CSS layout magic
- 7:14Resilient layouts with flex
- 10:31Flex basis and forms
- 15:12Pancake layout
- 17:40Why grid is underused
- 19:08Grid basics and columns
- 23:44Grid vs flex for responsive
- 26:58Auto fill and auto fit
- 28:44Grid template areas
- 34:06Power of template areas
- 36:35Grid support and use
- 38:23Container queries
- 40:10Closing remarks
