A Chrome extension to overlay a design grid on your web page; configurable to fit many design scenarios.

The Design Grid Overlay is available the Chrome Web store.

Or install via Git if you wish to contribute.

• Clone the git repository to your local machine or download the zip file ZIP and unzip the folder.
• After the folder is on your desktop, open Chrome.
• Once Chrome is open, click the hamburger menu on the far right go to More tools, then click Extensions.
• Once there, be sure the "Developer mode" box is checked and then at the top click "Load unpacked extension".
• Once clicked navagiate to the grid plugin folder on your computer and press select.
• Once selected the plugin should appear at the top of your chrome browser.
• Click the extension image to activate it or use Mac - command+shift+A, Windows - Ctrl+Shift+A to activate the extension.
• Use Command + Shift + K to toggle Vertical Grid Overlay
• Use Command + Shift + H to toggle Horizontal Grid Overlay
• Hold Shift Key to go up/down 10px for all input fields in setting tab

• Anthony Topper
• Chris Norman
• James Skorupski
• Aaron Kleinsteiber
• Mikhail Panichev
• An-Ni Wang

Props to Carl Henderson whose Chrome Bootstrap project was the original source, which we forked from.

Contribution Guidelines