960 Grid System: What is it?

Today I wanted to touch base on the 960 grid system. The first time I had seen and used the 960 grid system, I’ll be honest, it was very confusing. I really wasn’t a fan of it and didn’t fully understand anything about it. This caused me to overwrite everything and caused more problems; which lead to more frustration with the grid. If this sounds like what you’re going through please keep reading.

Why use 960 grid?

A grid system helps quickly mock up a grid based layouts using CSS without going through common layout issues. This reduces development time by providing pre-coded  cross-browser tested HTML/CSS.

The 960 grid system has three main layouts: 12-column grid, 16-column grid and 24-column grid layouts. No matter which layout you choose, you’ll need to add container_X class to your parent most element to set the stage for what’s to come.

The 12-column grid has the widest single column out of the three mentioned above at 60px. Each column thereafter is increased by 80px with a 10px gutter. This means you have these available column widths in your design: 60, 140, 220, 300, 380, 460, 540, 620, 700, 780, 860 and 940. Wait, I thought you said this was based off of 960px wide? Well, it is but this is based upon having a 10px gutter on each side of the column. That means you need to add 20px to get your 960 if you’re using the 940px column which is 960px.

960 GS 12 Column Layout

960 GS 12 Column Layout

Additionally, the 24-column grid has the smallest single column out of the three. A single column is 30px. Each column thereafter is increased by 40px with a 5px gutter. Thus giving you these available column widths: 30, 70, 110, 150, 190, 230, 270, 310, 350, 430, 470, 510, 550, 590, 630, 670, 70, 750, 790, 830, 870, 910, and 950.

960 GS 24 Column Layout

960 GS 24 Column Layout

Let’s review

You’ll need to select a grid column layout that will fit your design based upon your design leniency. Think about how many columns you’ll need based upon your wire frame and be sure to use it during the design process. If implemented properly you’re front end development will go very smoothly.

I have a design based upon the 24 grid layout, now what?

Now that you have a design based upon the grid how do you get it laid out properly? Think of each column above as a CSS class number. What I mean by that is how many columns is it spanning?

The CSS classes are named based upon grid_X. X being the number of columns you need it to span. For instance, in the example above, I might use “grid_1” followed by “grid_23” on my containing div. The only trick is to make sure your selected classes add up to your 960 grid you’re using. So, in case I would need to make sure it evens out to 24.

Example Column layout for 24 grid

Example Column layout for 24 grid

Lastly, now that you have your basic site structure completed you may need to nest some elements within each other. This will cause layout issues because of the gutters. However, 960 has you covered with the alpha (first) and omega (last) classes. Append the alpha class to the first child and omega to the last child to any grid element that are children of other elements. Voila, your layout issues are fixed!

Advanced layout modifications

Let’s say you need to overlay elements over one another or extend them outside their respective column. You can accomplish by using the push and pull classes. Just simply add push_X to your class. Again, “”x” is the number of columns you would like to push or pull the element.

How Push and Pull classes work

Example of Push and Pull classes

In the example above, I’ve started out with two columns but I would like to push or pull them 3 columns. This will create and overlay while eliminating any layout issues you would get without a grid system. You can also utilize this to completely switch positions with any element on a horizontal plan. This means that you can have a content element first and a logo second in your markup. However, with the push and pull classes you can completely rearrange them visually on the page.

Lastly, let’s say that you need a gap between some elements on the page. If you remember from above, your elements need to add up to the grid you’re using. So, again 960 has you covered. All you need to do is add suffix_X or prefix_X to your class name to gain that space. Obviously, prefix would be used if you wish to have your space before your element and suffix is used for spaces after our element.

How Prefix and suffix classes work

Example of Prefix and suffix classes

In this example, I would like a 5 column gap between my elements. As you can see I’ve added suffix_5 to my grid_11 class, thus giving me a total column span of 16 columns.

In review

Let’s review the basic elements that we’ve learned today shall we?

  1. Use the proper container that fits your design. This includes containter_12, container_16 and container_24.
  2. Use grid_X to apply the proper column width to your elements, based upon design. This need to equal the total column number you chose is the step above.
  3. Use alpha/omega for nested child elements
  4. Utilize the push/pull classed if you need to rearrange elements horizontally on the page.
  5. Use prefix/suffix to gain column space between elements in your layout.

Lastly, this system is really great to use and FREE TO USE! However, it will take some practice and effort to really master but once you do, like your blood pressure, your development time will go down. So, if you’re up to it give 960 GS a shot!

 

 

Josh serves as a development team lead at TKG, so it’s his job to ensure web development projects get done on schedule, on budget, and working flawlessly. No pressure! On the blog, he talks general web dev – from HTML5 to responsive design.

Email Josh | Read Full Bio

Leave a Reply

Your email address will not be published. Required fields are marked *

16 − eleven =