Jake Selvidio
Art & Design Instructor

mm205 « Web Scripting » 960 Grid

960 Grid

by Nathan Smith

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. The 12-column grid is divided into portions that are 60 pixels wide. Each column has 10 pixels of margin on the left and right, which create 20 pixel wide gutters between columns.

Sample Grid

Above is an example of how the code works. The container specifies how many total columns exist (shown here with 12). For the most part, you will only ever need to specify a class name of grid_XX, where XX represents the column width.

Grid Children

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.
(seen below)

The alpha class removes the 10px left margin and the omega class removes the 10px right margin. Without these classes, grid children would not fit properly in their parent grids.

Push & Pull Classes

The push_XX and pull_XX classes will move your grid box to the right or left respectively, where XX represents the number of columns.

As seen above, the push_XX or pull_XX class can be used to center content. It can also be used to swap the position of two neighboring grid boxes.

Prefix & Suffix Classes

The prefix_XX and suffix_XX classes can also move content around the grid, but do so by adding padding within the grid box.


Copyright © 2014 Jake Selvidio. All rights reserved.