960 Grid System

June 7, 2009

960 Grid SystemThe 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, which can be used separately or in tandem.

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.

The premise of the system is ideally suited to rapid prototyping, but it would work equally well when integrated into a production environment. There are printable sketch sheets, design layouts, and a CSS file that have identical measurements.

The 960 Grid System is free to use, and may be repurposed to meet your specific needs.

Visit 960.gs for more details.

  • Digg
  • del.icio.us
  • Reddit
  • StumbleUpon
  • Facebook
  • LinkedIn
  • Technorati
  • Twitter
Tags: , , , , , , , , , , ,

This entry was posted on Sunday, June 7th, 2009 at 9:06 am and is filed under Journal, Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

1 Response

  1. I’ve used the 960 framework on several projects. It saves time compared to building everything from scratch. Probably a little overkill for small sites, but for larger projects it makes a lot of sense. Another popular CSS framework is Blueprint.

Leave a Reply