Demystify modern CSS layouts with DevTools

A presentation at View Source Conference 2019 in in Amsterdam, Netherlands by Chen Hui Jing

Flexbox, Grid and Box alignment properties are powerful and versatile new additions our web development toolkit. However, they may be slightly confusing to wrap your head around if you do not completely understand how browsers interpret the CSS values you assign. Although we tend to associate DevTools with debugging, Firefox DevTools comes with features that can help visualise how these properties work and better understand what’s going on as the viewport size changes.

Buzz and feedback

Here’s what was said about this presentation on Twitter.