Grid systems are the visual design 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 7 columns, and the links to the right of it might take up the remaining 5. 3 images down below might be spread out evenly, each taking up 4 columns. But a big, attention-getting image could 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.
A classic, popular grid. It’s 960 pixels wide, which makes it evenly divisible into a large number of columns.
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.
Are you a fan of pen and paper? A grid notebook will have you covered!