The 960 Grid System Explained In Depth

What is Grid 960?

Grid 960 is a CSS framework which facilitates developers to rapidly develop UI prototypes. For several years, it has been helping developers to structure and design web layouts. There is good chance you might have used or know what a CSS framework is. A CSS framework is just a series of stylesheets created to simplify developer’s life and grid 960 does just that. It has also been adapted as a theme for Drupal.

Why 960 Grid?

All modern monitors support at least 1024 × 768 pixel resolution. 960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. This makes it a highly flexible base number to work with.

The 960 grid system consists of a main container which is always 960px wide. This main container is divided into multiple columns of equal width. There are two standard variants: 12 and 16 column grids. But, depending on your convenience you can have 10 or 20 column grid.

Incase of 12 column grid, the main container is divided into 12 equal columns that are 80px wide. Each column has 10px margins on the left and right, which makes 20px wide gutters between 60px wide columns. The total content area is 940px (960px main container – 2 gutters 10px wide).

Layout Diagram of Grid 960

Take a look at the above picture, it shows some of the possible combinations in which we can divide a 12 column grid. The 1^st row shows a single large grid which is 12 columns wide i.e. 960px. The second row shows 2 grids, a small grid just 1 column wide and another 11 column wide grid next to it. You can have any combination as shown in the above image. You can also have more than 2 grids in a single row. The possibilities are huge.

Each width corresponds to a class name formed like grid_XX where X is the column number and X * 80 – 20 will give you the width of the grid. So, if you use class name as grid_6, the column width will be 6 * 80 – 20 = 460px.

Here’s a quick overview of the syntax, pulled from the 960.gs site:

<div class="container_12">  
    <div class="grid_7 prefix_1">  
        <div class="grid_2 alpha">  
            ...  
        </div>  
        <div class="grid_3">  
            ...  
        </div>  
  
        <div class="grid_2 omega">  
            ...  
        </div>  
    </div>  
    <div class="grid_3 suffix_1">  
        ...  
    </div>  
</div>

The first div is your main container. By defining its class as container_12 you are telling that your page will be divided into 12 equal columns. If you use container_16, your page will be divided into 16 equal columns and so on.

Once you define your website’s main container as a 12 column layout, the next step is to structure your site to fit in this layout. As you can see, we have 2 div elements inside the main container with classes’ grid_7 and grid_3 assigned to them. This is quite simple to understand. Div element with grid_7 class will take up 7 columns and div element with class grid_3 will take up 3 columns. Out of 12, 10 columns are occupied so we are left with 2 columns at the end of the container. This is not exactly true in the above example because of prefix_XX and suffix_XX classes assigned to this grid. With a class definition of “grid_X prefix_Y” you are telling that you need your div to occupy X columns and you need Y number of empty columns before your div. Whereas “grid_3 suffix_1” class definition states that you need your div to occupy 3 columns and 1 empty column after it. So that makes 7 (first div) + 3 (second div) + 1 (prefix) + 1 (suffix) = 12.

Now, let’s go inside the div element with class grid_7. Well, you can see 3 child div’s each with classes grid_2, grid_3 and grid_2. Here each div will occupy the specified number of columns as long as we are not exceeding the size of the parent div. You might be wondering why we have 2 more classes “alpha” and “omega” appended to the child grids. Well, the first and the last child elements must have “alpha” and “omega” appended to their class definition, respectively. So in the above sample code, div with classes “grid_2 alpha” is the first child div inside div with class “grid_7”. Div with “grid_3” is the middle element without “alpha” or “omega” class assigned to it. And “grid_2 omega” is the last child element.

So, the final layout will look something like:

Grid 960 Final Layout

Since you have understood how we can use 960 grid system to design your pages let’s go one step further. For latest high resolution monitors 960px is a bit smaller area and you might want your application to fit into much bigger area. Don’t get disappointed because of this disadvantage of Grid 960. Nather smith has provided a custom CSS generator using which you can generate and download CSS file that fits any screen size. You can also define the number of columns you need, column with and also the gutter width. Follow the link http://grids.heroku.com/ to generate custom CSS which fulfills your requirement.