DevTools, the CSS advocate in your browse
summary
DevTools demos show exact behaviors: grid and flex overlays reveal content-based sizes (min-content, max-content), a working Firefox flexbox inspector visualizes flex-basis, grow/shrink ratios and free-space distribution, and animated layouts use animate grid rows and columns (shipped in Firefox 66). Examples include fit-content(300) capping a column, fr/minmax comparisons that change which column shrinks first, and a production-style feature layout rebuilt without extra breakpoints to prove the techniques actually work.
AI-written summary · about
chapters (18)
- 0:00Intro
- 0:30Contentbased sizing
- 7:27Flexbox
- 15:40Freespace distribution
- 16:40Flexbased sizing
- 23:58Grid Inspector
- 32:10Flexible Sizing
- 32:40CSS Grid
- 33:36CSS Fr
- 35:37MinMax
- 36:25MinMax vs Auto
- 36:55MinMax shrinks
- 37:24MinMax shrinks together
- 37:48MaxMax shrinks together
- 38:03MaxMax continues to grow
- 38:20MaxMax stops growing
- 38:31Blue stops growing
- 38:41Real world examples
related talks
36mDevTools, more than just a debugger
42mUsing DevTools to Understand Modern CSS Layouts
33mUsing DevTools To Understand Modern CSS Layouts – Chen Hui Jing at
25mDevTools Deep Dive
39mNext Level CSS
11mChrome DevTools for designers
28mWe have DevTools. What about DesignTools?
02h 55mCSS Grid is the new black