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.

Introduction
Who am I
What are modern CSS layouts
Contentbased sizing
Fit content
Flexbox
Flex shrink
Available free space
Box alignment properties
Common use cases
Flexible sizing
Fr vs Otto
Fit vs Min
Auto vs Fit
Variable Sizing