Using the 960 grid system

The 960 grid system is an effective CSS tool for arranging layouts on your webpage. At it’s core, 960 grid based on a grid structure of either 12 or 16 vertical columns evenly divided on a 960 pixel frame. Using it is simply a matter of applying a “hook” to the class attribute of elements in your HTML markup.

For example if I was to create a page using the 12 column layout I would apply a class of container_12 to the <body> or a page wrap <div> tags to specify the initial layout of my document, like so:

<body class="container_12">

All Individual tags that require placement then have the same hook applied to them. However they need to be augmented to ensure proper placement on the grid structure. This is done with applying additional hooks to the class attribute.

  • container defines the grid structure you are using on the page. Either 12 or 16.
  • grid controls the horizontal size of the tag. For example a element with a class of grid_6 uses up 6 of the 12 vertical columns.
  • prefix and suffix control the amount of white space to the left and right of elements respectively. Therefore, any tag with a class of prefix_1 would have single vertical column space on its left side.

Using standard semantic HTML, elements with 960 hooks applied to them look like like so:


<div id="main-column" class="grid_8">
     <h1 class="prefix_1">Lorem Ipusm</h1>
     <p class="suffix_1">My Paragraph.</p>
</div>
<div id="side-column" class="grid_4">
     <p>My Sidebar.</p>
</div>

Wile simple enough to understand and use there are several pros and cons to using the 960 grid system:

Pro

  • Gives pages a consistent geometric grid structure.
  • 960 pixel wide, 12 or 16 column grid is useful for most web projects.
  • Pre-built, easy to understand, simple to use!

Con

  • Steps away from pure semantic markup.
  • Doesn’t give pixel precise control over elements.
  • Doesn’t scale horizontally, no fluid or elastic layouts

At the end of the day it’s your choice whether or not to use any CSS framework with the site you’re working on. They can be a real time saver for structuring the layout of a site, however it does have a cost of clean HTML.

Tags: , ,