Automate Your Grid Design Process with GridGuide

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.

The 10 Most Fascinating jQuery Grids


.no-js #ref-block-post-24547 .ref-block__thumbnail { background-image: url(“http://media02.hongkiat.com/thumbs/250×160/jquery-grids.jpg”); }

The 10 Most Fascinating jQuery Grids

jQuery is usually the first choice for most people who want to dip their feet in JavaScript programming…Read more

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.

gridguide grids preview

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.

gridguide share link

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.

Integrating Simple CSS Grid Layouts into WordPress


.no-js #ref-block-post-14099 .ref-block__thumbnail { background-image: url(“http://media02.hongkiat.com/thumbs/250×160/css-grid-wordpress.jpg”); }

Integrating Simple CSS Grid Layouts into WordPress

Getting a consistent, solid grid layout into WordPress can be a painless process if you use the right…Read more

Source: Hongkiat

(1149 Posts)

Leave a Reply