Grid Overlay Pro
A browser extension to visualize grid layouts on any webpage
79 followers
A browser extension to visualize grid layouts on any webpage
79 followers
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.
@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.
@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.
@devagyasharma Congrats on the launch Sharma! Where does this fit best in a real workflow? Before build, during dev, or during QA?
@kimberly_ross Hi Kimberly, thanks for the wishes!
I've been using this in the development and QA phases.
During development, I use it to make layout decisions like allocating a specific number of columns to an element and vertical spacing between elements, similar to how you would use grids in Figma.
During QA, it helps me quickly scan over pages to make sure the layout is cohesive.
My favorite feature of the app is its responsiveness; once you set up grids for your breakpoints, the extension automatically switches between them as you resize the screen.
I hope that answers your question. Do let me know if you have been able to use it in your workflows.
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
minimalist phone: creating folders
As someone who occasionally works with graphics, I appreciate that! :D
@chander_chen I'm sorry to hear that, Chander. Because the tool relies on JavaScript and DOM injections, it is possible that some websites block the extension's functionality. What website were you trying to use it on? I'll test it out and let you know if it can be solved.