1280 A grid based method for web page design

Here's the code:

To the right is an example of how the code works. The container specifies how many total columns exist, in this case, 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.

Sample code:

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

Plugins

There are plugins for Photoshop and Fireworks included in the official 960 grid download. DMXzone has created a Dreamweaver extension, and is available free to members of their site.

Derivatives

The 960 Grid System is free to use, and may be repurposed to meet specific needs. Several projects have already spun off, including versions that are considered to be both fluid and responsive. Additionally, Drupal has adopted it as a theme.