Layout Tools

See exactly how every element is positioned and sized. Toggle overlays for flexbox, CSS Grid, and absolute positioning to understand layout structure at a glance — without digging through computed styles or guessing which container controls the alignment.

Add to Chrome for free

layout-tools-hero.webp

About Layout Tools

Layout Tools brings visual overlays to flexbox, grid, and positioning. See exactly how elements are laid out without digging through computed styles. Toggle between overlay types to understand the full hierarchy of the page.

Features

Understand every layout on the page with visual overlays.

Flexbox Inspector

Highlight flex containers and their children with colored overlays. See axis direction, wrapping behavior, alignment, and space distribution at a glance.

Grid Overlay

Grid lines, tracks, and cell names overlay directly on the page. Inspect named areas and gutter sizes without opening DevTools.

Position Debugger

See z-index stacking, absolute offsets, and float behavior visually. Spot overlapping or misplaced elements the second they happen.

How to use

1
Select Layout Tools from the InspectDev toolbar.
2
Choose the layout type you want to inspect — flex, grid, or positioning.
3
Hover over any container to see its layout overlay with dimensions and track information.
4
Toggle between overlay types to understand the full layout hierarchy of the page — all without switching tabs.

Try Layout Tools free

Layout Tools is included in the free version of InspectDev. Upgrade to Pro for advanced features like persistent workspaces and team sync.