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.
- (2020-02-21) Erki Kütt: Very helpful in making grids. I wish something like this would exist for Firefox.
- (2020-01-25) Denis Rodman: + Работает на локальном сервере
- (2019-12-21) bin hui: very userful!! Thank you!
- (2019-11-02) Jennifer Ann Donelan: Can't get it to show the grid.
- (2019-10-15) Ahmad Ajmi: Exactly what I need. Thank you!
- (2019-08-10) Артём Онищенко: Super!
- (2019-07-24) 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!
- (2019-03-27) Vey good. It would be improved if there was an option to add more break points. "Large" and "small" are just not enough
- (2018-11-09) 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.
- (2018-05-31) Artem Solovev: This extension is the best in its class. Big thanks for developers!
- (2018-01-10) Addway Design: Very nice plugin, would be perfect if can save/load settings, or export/import
- (2017-09-06) 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..
- (2017-07-14) Dolores Joya: Very useful
- (2017-04-19) 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.
- (2017-04-16) Sergey: Great!
- (2016-12-24) Yilber Mejia: Love it!!!!!!
- (2016-09-12) Ahmet Oguzhan Basar: Wonderful plugin, so useful!
- (2016-08-02) Stijn van Cuijk: The best grid extension by far. Would like an option to have lines instead of planes.
- (2020-05-07, v:1.0.1) Max Taverna: Horizontal lines not showing in inspect mode
The horizontal line overlay is not showing in chrome inspect mode
- (2019-12-12, v:1.0.1) Paul Kelly: additional breakpoints
It would be ideal if I could add an additional third condition for another breakpoint.
- (2019-10-24, v:1.0.1) Ties Goossens: Can't change max layout width
I want to select it, and then type a new value, but it doesn't allow me to do such thing!
- (2018-11-09, v:1.0.1) Rahul Alam: Not working (Design Grid Overlay)
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.
- (2017-12-01, v:1.0.1) a rr: question
cannot get the extension to work, it just turns itself off Do you have instructions ?
- (2017-08-02, v:1.0.1) Kyle Cassaday: autostart option
Hi, I'm a web developer, and I use Design Grid Overlay for almost every project. I have an issue though. Everytime I make a change to a webpage I am designing, I need to refres h the browser with the Grid Overlay showing. The Grid disappears when you refresh the page. Is there anyway you can add a setting that would allow the extension to stay visible after a page reload? It would be extremely useful. Thanks for your time. Kyle Cassaday
- (2017-07-27, v:1.0.1) karine Champigny: The grid is no longer memorized
Hello, When I refresh the webpage, the grid is no longer memorized. By the way, it's a very nice extension !
- (2017-07-24, v:0.5.2) Harshad Prajapati: support for firefox
did this overlay support for firefox?
- (2017-04-18, v:0.5.2) Max Black: Logo Design App
Nice extension! Go to my web app if you need a Logo: https://goo.gl/6Yvg33