DevTools, the CSS Advocate in Your Browser

on YouTube ↗43m

" summary

Shows browser DevTools for inspecting CSS layout math: Firefox’s Flexbox inspector reveals flex-basis, flex-grow and how free space is split (example: 2:1 split affecting final sizes), plus a three-column demo where flex-grow changes sizes without changing content. Also covers CSS Grid with Chrome’s Grid inspector showing named areas, animated tracks and placement indices, and live resizing examples that demonstrate fit-content(300px) capping expansion and how min-content/max-content control shrink and growth.

AI-written summary · about

" chapters (7)

1. 0:00Welcome
2. 7:11Min/max/fit-content
3. 19:29Flexbox free space
4. 24:04CSS Grid Inspector
5. 32:06Responsive Grid units
6. 40:45Grid vs percentages
7. 42:15Conclusion

" related talks

• 36mDevTools, more than just a debuggerChen Hui Jing · JavaScript fwdays'20
• 33mUsing DevTools To Understand Modern CSS Layouts – Chen Hui Jing atChen Hui Jing · CSSConf EU 2019
• 25mDevTools Deep DiveAlex Lakatos · JSPoland Conf 2017
• 50mPresent and Future of CSS LayoutTab Atkins · CSS Day 2014
• 11mLightning Talk: Think FlexOleksii Kachura · Front-Trends 2016
• 15mFlexboxRyan Seddon · Web Directions South 2013
• 39mNext Level CSSRachel Andrew · ffconf 2016
• 31m"CSS3 Layouts: Flexbox vs CSS Grid"Sara Vieira · Codemotion Milan 2015