Media
4 items
Description
Overlay a configurable responsive column grid on any webpage. Responsive Grid Overlay overlays a fully configurable column grid on top of any webpage, so you can check spacing, alignment, and responsive breakpoints against your actual design specs — without editing CSS or opening DevTools. KEY FEATURES • Per-breakpoint grid definitions — set column count, gutter, margin, and container width independently for as many breakpoints as you need, and the overlay automatically switches to the right one as you resize the viewport. • Three independent column styles — toggle Fill (alternating column backgrounds), Border (solid column rules), and Outline (dashed column rules) on or off in any combination, each with its own color and opacity. • Crosshair guides — optional mouse-following vertical/horizontal lines for pixel-precise alignment checks. • Per-site memory — every domain remembers its own grid configuration. Turn the overlay on for one site and off for another; settings persist across page reloads and navigation. • Presets — save a grid configuration once and apply it instantly to any other site, so you don't have to re-enter the same breakpoints for every project. • Keyboard shortcut — toggle the overlay on the active tab without opening the popup (customizable in chrome://extensions/shortcuts). • Always visible — the overlay renders above native dialogs, popovers, and fullscreen content, so it stays useful even on complex, interactive pages. • Fully local — all settings are stored on your own machine via Chrome's local storage. Nothing is sent to any server, and no analytics or tracking of any kind are included. WHO IT'S FOR Frontend developers, designers, and QA engineers who need a fast, accurate way to verify that a live page matches its grid system — during development, code review, or design handoff — across any breakpoint, on any site. HOW TO USE 1. Click the extension icon on any page. 2. Define one or more breakpoints (min width, columns, gutter, margin, container width). 3. Turn on Fill, Border, and/or Outline to see the grid. 4. Resize the window — the grid updates to the matching breakpoint automatically. 5. Save your setup as a preset to reuse it on other projects.