Just a heads up to anyone who’s planning on designing their next project using a grid. The folks over at Analog have created a nifty little tool called Hashgrid to overlay a grid over your web page like so:
Installation is pretty simple but I ran into a couple of minor issues which hopefully can be remedied in a future version:
- The negative margin in the example is half the width of your grid, and whilst that’s probably obvious it may be worth adding a comment in the CSS on hashgrid.com just to make that clear
- I had to add a high z-index to the #grid in the CSS to make sure it correctly overlayed my page. If your grid isn’t showing this is probably why.
The hardest part is creating the grid image in photoshop. The quickest way I found to do this is with the selection tool and guides. Once you’ve created your guides it takes a few seconds to use the line tool to draw over your guides. If I get some time I might create a quick tool to generate dynamic grid images unless the hashgrid folks want to beat me to it ;-)