Grid overlay / layout guides
Guide lines drawn over a page to reveal its columns, gutters, margins, and baselines so small alignment errors become obvious.
See it
What it is
A grid overlay draws the columns, gutters, margins, or baseline intervals of a layout on top of the finished page. It is the digital version of laying tracing paper over a composition. Figma calls these Layout grids and can attach them to frames as columns, rows, or a square grid.
Turn one on while implementing a design system or reviewing a page with many sections. It makes a 4px drift, a mismatched gutter, or a card that quietly ignores the shared wrapper immediately visible. Chrome DevTools gives you a free version of the same thing: the grid badge in the Elements panel draws track lines and numbers over any CSS Grid container. For the page's own guides, a repeating CSS gradient plus a keyboard toggle is enough.
Gotcha: the overlay only diagnoses alignment; it does not create it. If the guide has different margins or breakpoints from the actual CSS, it produces false confidence. Keep both values in the same custom properties, set pointer-events: none, and make sure the debug layer is off in production screenshots and interaction tests.
Ask AI for it
Add a toggleable layout-guide overlay to this page. Use a fixed inset: 0 debug layer with pointer-events: none and a repeating-linear-gradient for 24px baseline lines, plus CSS Grid tracks matching the page's 12 columns and gutters. Read the wrapper width, margin, and gap from the same CSS custom properties as the real layout. Toggle it with the G key, hide it by default, and set aria-hidden="true" on the overlay.