Launching today
Grid Overlay Pro

Grid Overlay Pro

A browser extension to visualize grid layouts on any webpage

68 followers

Visit website
•
Grid Overlay Pro is a browser extension that helps designers and developers ensure pixel-perfect alignment by overlaying customizable grid systems on any webpage. Unlike static design tool overlays, it features responsive grid adaptation—automatically adjusting column widths and spacing when the viewport resizes, maintaining consistent proportions across any screen size.
Grid Overlay Pro gallery image
Grid Overlay Pro gallery image
Grid Overlay Pro gallery image
Grid Overlay Pro gallery image
Free
Launch tags:Chrome Extensions•Design Tools•Developer Tools
Launch Team / Built With
Wispr Flow: Dictation That Works Everywhere
Wispr Flow: Dictation That Works Everywhere
Stop typing. Start speaking. 4x faster.
Promoted

What do you think? …

Devagya Sharma
Maker
📌
Hey Product Hunt! I'm Dev, and I built Grid Overlay Pro to solve a problem I kept hitting as a Design Engineer. When you're translating designs from Figma to code, the grid systems that keep everything aligned just disappear in the browser. You end up opening the inspector constantly to verify spacing, check if elements line up, or confirm your responsive breakpoints are correct. It breaks your flow. Grid Overlay Pro puts those grids back. You can overlay customizable grid layouts directly on any webpage and verify your work visually instead of numerically. What you can do: • Set up custom column grids with specific gutters and margins • Create multiple breakpoint configurations • Toggle the overlay with keyboard shortcuts • Save multiple grid settings as presets I built this after spending way too much time context-switching between my code editor, browser, and inspector just to check if my 12-column grid was actually behaving correctly at different screen sizes. The extension is free and works on any website. I'd love to hear what you think or what features would make it more useful for your workflow. Happy to answer any questions!
Piroune Balachandran

@devagyasharma Figma grids vanish the moment you're in the browser, so I like that Grid Overlay Pro has Responsive Breakpoints + Quick Presets. Does it snap the overlay to a selected container, not just the viewport? That keeps reviews from turning into pixel debates.

Devagya Sharma
Maker

@piroune_balachandran Thanks for the feedback! As of now, the grids are applied to the viewport, but I like the idea of per-container overlays.

Jenni
AIVory Guard

This is a great idea! XScope has a similar built in tool but having it in the browser makes it even easier. Because I, too, have been at that place you describe

Nika
minimalist phone: creating folders

As someone who occasionally works with graphics, I appreciate that! :D