Grid systems are the design structure for building a web page.

Grid systems are the visual structure for building a web page. To a designer, a web page might be made up of 12 or 16 equally-sized, invisible columns. These invisible columns are grouped together in order to create the actual columns you see on a web page.

Without a grid system, you’d have to decide on how wide to make every column on the page without any sort of guide. With a grid system, you just have to pick how many columns each piece of information takes up.

Let’s say you’re designing from a 12-column grid. A blog post might take up seven columns, and the links to the right of it might take up the remaining five. Three images down below might be spread out evenly, each taking up four columns apiece. And a big, attention-getting image? It can reach over all 12!

In order to be visually consistent, information on a web page needs to have the same spacing between it and its neighbors. These spaces are called gutters, and are built into the grid system between each column. When a designer is picky about the space between a blog post and a set of links, or how much space an ad takes up, it might be because of the grid system.

Grid systems usually have a standard width they’re aiming for, such as 960 or 1024 pixels. These numbers are great because it’s easy to evenly divide them into any number of columns. 960 divided by 2 makes two 480-pixel columns, 960 / 3 = 320-pixel columns, 960 / 8 = 120, and so on.

You don’t have to design using a grid system, but it speeds up the process and helps make the page more visually appealing.

Resources

960.gs
A classic, popular grid. It’s 960 pixels wide, which makes it evenly divisible into a large number of columns.

1140 Grid
The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and uses media queries to serve up a mobile version.

A Responsive Grid PSD
A Photoshop document that shows mobile, tablet, and website grid systems side by side.

Gridbooks
Are you a fan of pen and paper? A grid notebook will have you covered!