960.gs is a CSS framework that provides 12- and 16-column grid total 960 pixels wide to use in a page markup.
Its dimensions provide valuable support to work with content blocks in a page flow.

WabiSabi960 gives an integrated ability to define page blocks directly in a page code.


{_N text _}                 - to wrap something into a 960 block N columns wide
{_N :class1 class2: text _} - to set other CSS classes to that block
{_}                         - to cut float after blocks (CSS/clear)

Example grid from 960.gs


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, which can be used separately or in tandem.
Read more.


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.
View demo.


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.


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 960 Grid System is free to use, and may be repurposed to meet your specific needs. Several projects have already spun off, including versions that were built to be fluid and elastic.

↑ ↑ ↑

This block uses additional italic CSS style.

Look at the source code of this page to see how it works - click Edit this page below.