Categories

CSS. Grid 960 system

Chris Diaz September 16, 2011
Rating: 3.6/5. From 5 votes.
Please wait...

Browsing through the template’s source code and styles you may have seen the classes like : “grid_6”, “grid_8”. These are the classes used by the grid 960 system. Let’s see what this system is and what it can offer.

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are several variants of the layout. The most often used are 12 columns, 16 columns and 24 columns grids.

Below you can see the example of 24 columns grid used for the template:

As you can see the layout blocks fit the grid columns. Using the available classes you can easily change the website layout according to your needs.

Usage

Each template where the grid system has been used contains the grid.css file where you can see the specific classes used. Let’s see how the grid system can be used.

Open the grid.css file, what can you see there:

 At the beginning of the css file you can see:

columns:24
Column width:30
Gutter width:10

So the intial file info shows you the number of columns used, the columns width and gutter width.

Then you can see the class .container_24{} – this class should be used for the container that will keep all you website content.

Note: the main class could be called container_12 or container 16 depending on the number of columns used.

Then the classes .grid_1, .grid_2 etc. – these classses could be used to set the width of the inner blocks. The blocks with grid classes should be put inside the block with class container_24.

The classes defines the width of the blocks:

.container_24 .grid_2 {
width:70px;
}

 

For example the code for the following layout is:

<div class="container_24">
<div class="grid_9">Some content</div>
<div class="grid_15">Some content</div>
<div class="grid_12">Some content</div>
<div class="grid_12">Some content</div>
</div>

In this html layout the following grid classes have been used:

.container_24 {
	margin-left: auto;
	margin-right: auto;
	width: 960px;
}

.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16, .grid_17, .grid_18, .grid_19, .grid_20, .grid_21, .grid_22, .grid_23, .grid_24 {
	display:inline;
	float: left;
	position: relative;
	margin-left: 5px;
	margin-right: 5px;
}

.container_24 .grid_9 {
	width:350px;
}

.container_24 .grid_12 {
	width:470px;
}

.container_24 .grid_15 {
	width:590px;
}

You can also use such additional classes as:

.prefix_1, .prefix_2 etc – defines the block left padding (the block’s indent from the left side);

.suffix_1, .suffix_2 etc – defines the block right padding (the block’s indent from the right side);

More information about the grid960 system you can see at the official website at http://960.gs/.


This entry was posted in Working with CSS and tagged class, css, grid960, style. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket