What are Grid Systems and Why You Need to Know About Them



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.

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.

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

Reprinted by permission.

About the author: Skillcrush

Skillcrush, your ‘how to get started guide to tech.’ You know that mastering technology is key to future success. Increase your tech know-how in collaborative online classes with real-live instructors there to help.

You are seconds away from signing up for the hottest list in New York Tech!

Join the millions and keep up with the stories shaping entrepreneurship. Sign up today.