960 Grid System Basic Principles and Usage

960 Grid System Basic Principles

Do not edit 960.css

Do not edit the 960.css file, if you modify it you will not be able to update the framework in the future.

Reading Grid

Before we can use CSS code from external files, we must first call them in our HTML file. Call it like this:

<link rel=”stylesheet” type=”text/css” media=”all” href=”path/to/960/reset.css” />
<link rel=”stylesheet” type=”text/css” media=”all” href=”path/to/960/960.css” />
<link rel=”stylesheet” type=”text/css” media=”all” href=”path/to/960/text.css” />

After we call them, we need to call our own CSS file. For example, you might name your CSS file style.css or site.css or something else. Call it like this:

<link rel=”stylesheet” type=”text/css” media=”all” href=”path/to/style.css” />

Containers

In the 960 framework, you can choose between two containers with class names .container_12 and .container_16. Both containers are 960px wide (that’s why it’s called the 960 grid), but they differ in that they contain a different number of columns. As the names suggest, the container of .container_12 is divided into 12 columns, while .container_16 is divided into 16 columns. Both 960px wide containers are horizontally centered.

Grids/Columns

There are many different combinations of column widths you can choose from, but they differ between the two containers. You can get an idea of ​​these widths by opening 960.css, but it’s not necessary for designing a website. Here's a useful trick to make using the framework easier.

For example, if you want to use only two columns in your container (main content area/sidebar), you can do this:

<div class="container_12">
<div class="grid_4">sidebar</div>
<div class="grid_8">main content</div>
</div>

You may have understood it after seeing the code above, but I still want to explain it. This means that you used the columns grid_4 and grid_8 in the container container_12 , and 4+8 equals 12! Do you understand? One of the benefits of using a grid system is that you don’t have to calculate the width of each column, saving a lot of calculations.

Let's look at how to write a four-column layout:

<div class="container_12">
<div class="grid_2">sidebar</div>
<div class="grid_6″>main content</div>
<div class="grid_2">photo's</div>
<div class="grid_2">advertisement</div>
</div>

As you can see, this system works pretty well. If you try to read his words using your browser, you will find that something is wrong. But it doesn’t matter, that’s exactly what we are going to discuss next.

Margins

By default, there is some margin between each column. Each grid_(insert value here) class has a left and right margin of 10px. That is to say, the margin value between the two columns is 20px.

A 20px margin allows the layout to maintain the proper white space and look smoother, which is one of the reasons why I like the 960 grid system.

In the example above, we had some issues reading it from the browser, so let's fix that.

The problem is that each column contains a left margin and a right margin , but the leftmost column should not have a left margin and the rightmost column should not have a right margin. Here is the solution:

<div class="container_12">
<div class="grid_2 alpha">sidebar</div>
<div class="grid_6″>main content</div>
<div class="grid_2">photo's</div>
<div class="grid_2 omega">advertisement</div>
</div>

You just need to add the alpha class to remove the left margin and the omega class to remove the right margin. Ok, now our layout is perfectly aligned in the browser. (yes, including IE6)

Styling

In fact, you’ve already learned how to create a basic grid layout using the 960 framework. But you may also want to add some styling to your layout.

<div class="container_12">
<div id="sidebar" class="grid_2 alpha">sidebar</div>
<div id=”content” class=”grid_6″>main content</div>
<div id=”photos” class=”grid_2″>photo’s</div>
<div id=”advertisements” class=”grid_2 omega”>advertisement</div>
</div>

Because CSS uses a priority format to determine how to interpret styles, id has a higher priority than class. This way we can create customized styles using id selectors in our separate CSS files. If there happens to be a style attribute that is the same as 960 but has a different value, the browser will give priority to the style in your CSS file .