Demystifying Modern CSS Layouts with DevTools

Demystifying Modern CSS Layouts with DevTools

Explore the intricacies of modern CSS layouts using Firefox DevTools in this 29-minute conference talk from View Source 2019. Dive into Flexbox, Grid, and Box alignment properties, learning how browsers interpret CSS values. Discover how to visualize these properties and understand their behavior as viewport sizes change. Cover topics such as automatic sizing, full-width punctuation, boundaries, Flex Box mechanics, Grid Inspector tools, and responsive design techniques. Gain practical insights into creating flexible and dynamic layouts through hands-on browser demonstrations and in-depth explanations of CSS concepts like Flex Basis, Grid Template Areas, and variable sizing.