Flexbox, Grid and Box Alignment are the cornerstones of modern CSS layouts. They introduce behaviours that might seem confusing if you don’t completely understand how the browser inteprets the CSS values you assign, e.g. sizing with Flexbox, or the various options for sizing tracks in Grid. DevTools are primarily used for debugging, but they can also help developers better understand and visualise how the browsers are interpreting layout properties. Through live demonstrations with DevTools, this talk will explain auto-margins, box alignment, flexible sizing and grid placement, and show some real-world use cases for building layouts with them.