Design Grid Overlay
Extension Delisted
This extension is no longer available in the official store. Delisted on 2025-09-15.
Extension Actions
- Minor Policy Violation
- Removed Long Ago
- No Privacy Policy
This extension displays grid and measurement overlays for a design grid system. It is configurable to fit many design scenarios
Using a design grid is an established way to create visual harmony and rhythm across an entire piece of visual media, especially a website. This design grid plugin can be configured to work with many popular grid systems including Bootstrap, Skin, Pure, Susy, Foundation, and many more.
This extension lets you enter a grid specification of columns, gutters, and widths, and then display grid guides and element measurements to align the content on your page.
v1.0.1 - bug fix for grid settings
v1.0.0 - Added keyboard shortcuts. Added the ability to use shift + click or shift + up/down to adjust values by 10 instead of 1.
v0.5.2 - Added horizontal lines
v0.5.1 - Fixed bug where the large Grid toggle button was not clickable after a recent Chrome browser update.
v0.5.0 - Added Content Width Labels in the Report tab, which show the content width (inner width, without borders or padding) of any elements using a CSS selector. This feature can be useful in customizing your CSS media queries and grid-aligned containers to ensure proper minimum and maximum sizing, regardless of screen size.
Latest reviews
- Erki Kütt
- Very helpful in making grids. I wish something like this would exist for Firefox.
- Denis Rodman
- + Работает на локальном сервере
- bin hui
- very userful!! Thank you!
- Jennifer Ann Donelan
- Can't get it to show the grid.
- Ahmad Ajmi
- Exactly what I need. Thank you!
- Артём Онищенко
- Super!
- Lorna Appleby
- Makes online graphic design layout SO much easier. I wish I could just change it to black grid lines with a size bar to switch between, but beggars can't be choosers! Saved me so many headaches!
- Anonymous
- Vey good. It would be improved if there was an option to add more break points. "Large" and "small" are just not enough
- Rahul Alam
- It's not working at all, I have done all things like deleted browser cache, etc. It's not opening the grid layout :( earlier it was working fine, but I don't know what's wrong now.
- Artem Solovev
- This extension is the best in its class. Big thanks for developers!
- Addway Design
- Very nice plugin, would be perfect if can save/load settings, or export/import
- SJ Calamia
- Can't configure grid units. I have no idea what unit it's using. "grid inner" "grid outer" what does that mean? is that main grid lines and sub grid lines? I got the impression from the name that this would be like putting a graph paper grid on a webpage, but no, that's not what this seems to do..
- Dolores Joya
- Very useful
- Sean Hay
- Really useful, did exactly what I needed when calculating distance between elements, and how much space to add. Handy 1-step responsive options too.
- Sergey
- Great!
- Yilber Mejia
- Love it!!!!!!
- Ahmet Oguzhan Basar
- Wonderful plugin, so useful!
- Stijn van Cuijk
- The best grid extension by far. Would like an option to have lines instead of planes.