Layout Tools

Six overlays that show how a page is built

Layout Tools draws helpful overlays on top of any website so you can see its structure at a glance. Turn on the ones you need from the popup and they appear over the page straight away. They are drawn on their own layers, so the page itself never changes and nothing shifts while you look.

Column Grid

A grid overlay shows the columns a layout is meant to sit on. Start from the Bootstrap preset (12 columns, 30 px gutters, 1140 px wide) or the Tailwind preset (12 columns, 32 px gutters, 1280 px wide), or set your own column count, gutter, maximum width and colour. The grid is centred on the page’s real width, without the scrollbar, so it lines up the way the layout does.

Element Outline

Outline every element on the page to reveal its structure. Choose a simple outline, colours by nesting depth to see how deep things go, or colours by element type to spot sections, lists and forms. Stray wrappers and unexpected overflow jump out immediately.

Flex and Grid Highlight

Marks every flex and grid container on the page. It is the fastest way to answer “which element is the flex parent here?” when an item will not line up.

Box Model Inspector

Hover any element to see its margin, border, padding and content as coloured zones, like the box model diagram in DevTools but drawn right on the page.

Breakpoint Indicator

A small tag stays in the corner with the current page width and the matching breakpoint name, using Tailwind or Bootstrap names. Resize the window and watch it change, so you always know which media query is in play.

Element Navigator

Hover an element and walk up to its parents or down to its children, with layout details for each one. Click to lock the selection while you read. The panel docks on either side of the screen.

When you are done, Turn all off clears every overlay in one click. Layout Tools also works on sites with strict security policies, where many overlay extensions fail to draw.