960 Grid System

the 960 grid systemEasy codes, complex layouts

What is it?

• Ready-made CSS file

• Make grid-based layouts within 960px

• Cross-browser compatible

• Three versions: 12-col, 16-col, 24-col

• No need to compute widths

How to get started• Create mock-up wireframes for your site,

using either 12, 16, or 24 columns

• Link the reset CSS file <link rel="stylesheet" href="css/reset.css" />

• Link the CSS file of the 960 grid <link rel="stylesheet" href="css/960.css" />

choose a container grid

<div class=“container_12”>

<div class=“container_16”>

use class names to give

column widths

<div class=“grid_12”>






column widths







column widths







column widths







column widths







column widths







column widths







column widths







column widths







column widths







column widths







column widths







column widths







column widths







column widths







column widths







column widths







column widths







column widths







column widths







column widths






ADD a CLEAR DIV after each row

<div class=“clear”>

<div class=“clear”>

move divs by pulling and pushing

<div class=“grid_3 pull_1”><div class=“grid_3 push_1”>

Add white spaces by using prefix/suffix

<div class=“grid_3 prefix_3”><div class=“grid_6 suffix_3”> OR

3-column space

Avoid double-margins using alpha/omega


<div class="grid_4"> <div class="grid_4"> <h1>4-‐col</h1> </div> <div class="grid_4"> <h1>4-‐col</h1> </div></div>

<div class="grid_5"> <div class="grid_3"> <h1>3-‐col</h1> </div> <div class="grid_2"> <h1>2-‐col</h1> </div> <div class="grid_1"> <h1>1-‐col</h1> </div> <div class="grid_4"> <h1>4-‐col</h1> </div></div>

<div class="grid_3"> <h1>3-‐col</h1></div>













double margins!!


<div class="grid_4"> <div class="grid_4 alpha omega"> <h1>4-‐col</h1> </div> <div class="grid_4 alpha omega"> <h1>4-‐col</h1> </div></div>





alpha:no left marginomega: no right margin


<div class="grid_5"> <div class="grid_3 alpha"> <h1>3-‐col</h1> </div> <div class="grid_2 omega"> <h1>2-‐col</h1> </div>

<div class="grid_1 alpha"> <h1>1-‐col</h1> </div> <div class="grid_4 omega"> <h1>4-‐col</h1> </div></div>

























everything adds up

everything adds up• All row widths should always add up to its

container div


container div• For a 12-col grid:

<div class=“grid_3 suffix_1”><div class=“grid_7”><div class=“grid_1”>




3+1+7+1=12




• For a 16-col grid:<div class=“grid_5”><div class=“grid_2 prefix_1”><div class=“grid_2 prefix_1”><div class=“grid_2”><div class=“grid_3”>

3+1+7+1=12




• For a 16-col grid:<div class=“grid_5”><div class=“grid_2 prefix_1”><div class=“grid_2 prefix_1”><div class=“grid_2”><div class=“grid_3”>

3+1+7+1=12

5+2+1+2+1+2+3

=16

REVIEW 960• Link your HTML to the 960 CSS files

• Choose your container grid type<div class=“container_12”>

• Add widths to your divs using grid<div class=“grid_5”> <div class=“grid_12”>

• Use clear divs after each row<div class=“clear”>

REVIEW 960• Move divs using push and pull

<div class=“grid_5 push_2”><div class=“grid_7 pull_1”>

• Add white space using prefix and suffix<div class=“grid_11 prefix_1”><div class=“grid_9 suffix_3”>

• Remove margins using alpha and omega<div class=“grid_6 alpha”><div class=“grid_3 omega”>

Speedtest 01

<!-‐-‐ CONTAINER -‐-‐><div class="container_16">

Speedtest 02

<!-‐-‐ SIDEBAR -‐-‐><div class="grid_4">

<!-‐-‐ ALL CONTENT -‐-‐><div class="grid_12">

Speedtest 03

div.container_16{background:#CCCCCC;}

Speedtest 04

<!-‐-‐ PHOTO -‐-‐><div class="grid_4 prefix_8 alpha omega">

Speedtest 05<!-‐-‐ SUB1 -‐-‐><div class="grid_4 alpha">

<!-‐-‐ SUB2 -‐-‐><div class="grid_4">

<!-‐-‐ SUB3 -‐-‐><div class="grid_4 omega">

Technology

960 Grid System