A browser extension to visualize grid layouts on any webpage
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.
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!
