Demystify Modern CSS Layouts with DevTools

Flexbox, Grid and Box alignment properties are powerful and versatile new additions to 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.