Using DevTools to Understand Modern CSS Layouts
Explore modern CSS layout techniques through live demonstrations using DevTools in this conference talk from CSSconf EU 2019. Gain a deeper understanding of Flexbox, Grid, and Box Alignment, the cornerstones of contemporary web design. Learn how to interpret browser behavior when assigning CSS values, particularly in sizing with Flexbox and Grid track sizing. Discover real-world applications that enable designs to adapt across various viewports. Topics covered include content-based sizing, fit-content, Flexbox properties like flex-shrink, available free space, box alignment properties, flexible sizing, and the differences between fr, auto, fit, and min units. Enhance your web development skills with practical insights into variable sizing and common use cases for modern CSS layouts.