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
- (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.
Statistics
Installs
34,031
history
Category
Rating
4.3415 (41 votes)
Last update / version
2017-07-25 / 1.0.1
Listing languages