Layout Inspector for Flexbox and Grid
Visualize flex and grid tracks, gaps, and item alignment using Chrome's layout inspector overlay.
Flexbox Badge in DevTools
Chrome DevTools marks flex containers with a "flex" badge next to their DOM node in the Elements panel. Clicking the badge toggles the Flexbox overlay — colored lines showing main axis, cross axis, item boundaries, and gap spacing.
Grid Badge and Overlay
Grid containers show a "grid" badge. Clicking it toggles the grid overlay: colored lines for columns, rows, and gaps. Persistent overlays (pinned in Layout panel) stay visible as you scroll or resize the viewport.
All lessons in this course
- Computed Styles and Box Model Inspector
- Layout Inspector for Flexbox and Grid
- CSS Overview Panel
- Animations and Transitions Debugger