Using the 960 Grid System for Layout
So I’ve been using the 960 grid system for over 6 months now and I have learned a thing or two that could be helpful to those looking at using it as well. If you don’t already know, 960.gs is a css framework to help you quickly enable layouts and help ease the pain of cross browser compatibility. I will start by laying out the pros and the cons of the 960 and then show you how to overcome possible gotchas.
This is what you want to hear right, how is 960.gs going to make your layout easier to manage and create. Well let’s start then.
- Complex layouts relatively fast.
- Consistent layout (IE, Firefox, Chrome, …)
- Reusable and Flexible
- Easy to learn
Ok so some of the down sides of using 960.gs, cause there are some obvious ones.
- More stylesheets ( 960.gs, reset.css, text.css and then yours)
- Respect it or it will bite back
- Divitus (lots of div tags based on your layout)
- Everything you need to do isn’t a grid
- not semantic (grid_12 is not expressive)
- multiple css classes on one element
by default the 960.gs is split into either a 12 column grid or a 16 column grid. I will focus on the 12 column grid. Each column in a 12 column grid is 60px wide with a margin of 10px on each side. You can see that below the max content area you can have is 940px, while the container expands to 960px due to the 10px margin on each side. You can also see that the margin between two columns is 20px, because each column has a 10px when two columns margins combine they make 20px. And finally, a div tag can span multiple columns and it’s length is made up of all the columns it spans and 10px of margin on each side.
ex. a column that spans 11 columns is 880px. column: 60px + 10px + 10px. 11 x 80px = 880px total : 880px with outside margins and 860px without outside margin (content area).
Ok that was a lot of math, but you only need to know how to count up to 12 or 16 to use this system. No need to do this math because it is done for you automatically. The point of the math is to show you that the box model is important to understand. Margin is outside of your div tag, while everything else is inside.
Example – The Basics
So you are curious about the above example, how what does the HTML look like? It looks like this.
<div class="container_12"> <h2> 12 Column Grid </h2> <div class="grid_12"> <p> 940 </p> </div> <!-- end .grid_12 --> <div class="clear"></div> <div class="grid_1"> <p> 60 </p> </div> <!-- end .grid_1 --> <div class="grid_11"> <p> 860 </p> </div> <!-- end .grid_11 --> </div>
Simple right, you see that we use a div with a class of container_12. This is used to help center your page and give a place to start laying out your page. The next thing you will see is grid_12. That is telling that div to span the whole way across, and it is then followed by grid_1, and grid_11. You can guess that we are specifying that the first div is a size of one column, while the next is 11 columns. The div with a class of clear forces the grids to the next line, but I have found if your rows always add up to 12 you can forgo the clearing, since floating will force elements to the next line anyways, that is up to you.
The first and major gotcha that people run into is they attempt to overly style their div tag that already has a grid class. This is a mistake and can lead to huge headaches. Let’s look at why you shouldn’t. I will show you what css rules are ok to use and which aren’t.
The first no-no is border. You shouldn’t use border on your grid divs because it adds size to your layout.
ex. You have a grid div that spans 5 columns. 5 x 80px = 400px. So you want to add a border of 1px solid black (always bet on black). What does that do?
That changes the math 5 x 80px + 2px (border-left and border-right) = 402px. now 2px might not seem like a lot, but it can force whole divs to the next line, throwing off your layout completely.
To fix this problem you should put another div inside the grid div and then style that. What you end up with is a container –> content relationship.
Margin and Padding
So you want to move a grid just a little bit over huh? DON’T. The same problem happens that occurs with Border. You force the columns to stretch pass what they were designed to do. Think of yourself trying to wear pants that are two sizes too small, it just isn’t pretty.
The solution again is to use a container-> content relationship. Where you have another div inside that handles margin and padding.
You might be seeing a theme here, width is the enemy of the grid system, especially explicit widths. If you have an element that is 200px in a column that is only 60px, then you’ll have problems.
The solution is to be mindful of your parent div. If you want to use width, look at using percentage. ex. width: 100% on the content div.
Things that are OK to Style:
background-color, color, background-image, position (absolute and relative).
The 960.gs is very powerful, but some CSS purist might not like it’s lack of semanticness (not sure if that’s a word). I see their point, but the up side is so great that I can overlook my HTML/CSS purism. Keep in mind the gotchas and you should be able to create consistent layouts in all major browsers.