I never thought I’m very good in CSS. Before playing with the 960 Grid System, I didn’t have much concepts on CSS frameworks. But After playing the 960 grid System, I’m immediately fall in love with it. Its make my life much easier because earlier I had to suffer a lot with the alignment problems.

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 two variants: 12 and 16 columns.

12 Column Grid

12 Column Grid

The 12 column grid is divided into portions that are 60 pixels wide. The 16 column grid consists of 40 pixel increments. Each column has 10 pixels of margin on the left and right, which create 20 pixel wide gutters between columns.

16 Column Grid

16 Column 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 container specifies how many total columns exist, either 12 or 16. For the most part, you will only ever need to specify a class name of grid_XX, where XX represents the column width.

If a grid unit contains grid children, the first child in a row will need a class of alpha and the last child in a row requires the class name omega. Likewise, if you want to insert empty space before or after a grid unit, use class prefix_XX or suffix_XX.

The following code is the Example of 960 grid:

<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>

Advertisements