960 Grid

From Zanecorpwiki

960 Grid is a CSS framework based on a 960 pixel wide content area that can be evenly divided into 12, 16, 24, 420, etc. columns. 12 and 16 column layouts are the original, most common, and most useful. I myself am partial to the 12 column layout. It gives reasonable size columns, and can do 3 or 4 even columns.

The style stresses the vertical and has to be augmented in order to to organize the horizontal. The single biggest weakness of the framework is the inability to set the hight of rows. In general, plain HTML+CSS isn't well suited towards tabular layout... unless you use tables, which I don't like and leads to all sorts of other problems and limitations.

960 grid, and, AFAIK, most CSS frameworks are primarily aimed at "content" sites. It's not designed for application/GUI layout.

Contents 1 Dealing with Limitations 1.1 Even Rows 1.2 Use Left/Right Padding Carefully 2 Resources

Dealing with Limitations

Even Rows

As mentioned, the first problem is controlling the row heights. In *most* cases, you want to have clear, even rows. You basically have two choices:

1. set the height explicitly
2. wrap the "cell"/column elements in a single row element and apply a background to make it appear as if everything is cohesive (even though the individual elements are of various heights)

Use Left/Right Padding Carefully

960 grid achieves it's layout with set width cells and margins. Left and right padding added directly to the grid cells pushes everything out of whack because padding is added to width to determine the effective width of the element.

As a consequence, you can only add padding to an inner-element within the primary grid element. I don't know if the cures to this would be worse than the problem itself, but I find this to be the most annoying limitation of the framework.

Resources

• 960.gs AFAIK, the main 960 Grid siet
• the Grid System resources for templates, tools, and news for many systems; it's organized by templates, tools, news, etc.... I kinda wish it was organized instead by the different systems--finding references to any one system seems to boil down to manual browsing and search