Automate Your Grid Design Process with GridGuide

By Jake Rocheleau. in Toolkit. Updated on December 13, 2019.

The first major step of any website design is picking a grid. This typically defines the maximum width of the page along with how many internal columns and gutters will be used to divide the layout.

You can try building your own but the best tool for this job is GridGuide. It’s a completely free webapp that fully automates grid generation for any website regardless of size.

Just put in your desired max width followed by the number of columns you want. Typically these two numbers should be divisible, so it’s a good idea to avoid prime numbers. Here are some common max widths for websites:

1100px by 12 columns
1200px by 8/12 columns
1240px by 8/12 columns
1440px by 8/10/12 columns
1600px by 8/10/12 columns

There is absolutely no wrong answer here. You can pick any width and as long as it’s evenly divisible by the number of columns then you’re good to go.

GridGuide is a snappy webapp so it auto-updates once you enter a value into the input field. So as you adjust the numbers at the top you’ll notice the grid previews automatically change.

I used to rely on Photoshop for this job and it drove me batty. Honestly creating a grid is one of the most frustrating steps when designing a new website, and getting the numbers pixel-perfect can be infuriating.

But GridGuide is completely automated and it gives you many different grid options based on different column sizes and gutter widths.

You can even download a full PNG image of the grid you choose to import into Photoshop. This will save a lot of time so you’re not re-creating grids with shape tools from scratch.

And if you like a certain grid style you can generate a share link to bookmark for later or to share with others on the web.

For a tool that’s completely free and so easy to use this has to be my top recommendation for every single web designer. If you struggle with grids and hate designing your own then GridGuide is a must-have resource in your toolbox.