Framer AI AgentsDesign and publish professional sites with AI
Promoted
Grid Overlay Pro
A browser extension to visualize grid layouts on any webpage
86 followers
A browser extension to visualize grid layouts on any webpage
86 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 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.
@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.
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: reduce your screentime
As someone who occasionally works with graphics, I appreciate that! :D