The 960 grid system document describes a grid system for building responsive web page layouts using CSS. It provides predefined CSS files for 12, 16, or 24 column layouts within a 960px container. Users create wireframes, link the CSS files, then use class names like "grid_4" to assign column widths without calculating sizes. It also describes techniques for adding spacing, pulling/pushing columns, and avoiding double margins.

1. the 960 grid
system
Easy codes, complex layouts

2. 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

3. 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"
/>

4. choose a
container grid
<div
class=“container_12”>
<div
class=“container_16”>

5. use class
names to give
column widths
<div
class=“grid_12”>
<div
class=“grid_11”>
<div
class=“grid_2”>
<div
class=“grid_7”>
<div
class=“grid_4”>

6. use class
names to give
column widths
<div
class=“grid_12”>
<div
class=“grid_11”>
<div
class=“grid_2”>
<div
class=“grid_7”>
<div
class=“grid_4”>

7. use class
names to give
column widths
<div
class=“grid_12”>
<div
class=“grid_11”>
<div
class=“grid_2”>
<div
class=“grid_7”>
<div
class=“grid_4”>

8. use class
names to give
column widths
<div
class=“grid_12”>
<div
class=“grid_11”>
<div
class=“grid_2”>
<div
class=“grid_7”>
<div
class=“grid_4”>

9. use class
names to give
column widths
<div
class=“grid_12”>
<div
class=“grid_11”>
<div
class=“grid_2”>
<div
class=“grid_7”>
<div
class=“grid_4”>

10. use class
names to give
column widths
<div
class=“grid_12”>
<div
class=“grid_11”>
<div
class=“grid_2”>
<div
class=“grid_7”>
<div
class=“grid_4”>

11. use class
names to give
column widths
<div
class=“grid_12”>
<div
class=“grid_11”>
<div
class=“grid_2”>
<div
class=“grid_7”>
<div
class=“grid_4”>

12. use class
names to give
column widths
<div
class=“grid_12”>
<div
class=“grid_11”>
<div
class=“grid_2”>
<div
class=“grid_7”>
<div
class=“grid_4”>

13. use class
names to give
column widths
<div
class=“grid_12”>
<div
class=“grid_11”>
<div
class=“grid_2”>
<div
class=“grid_7”>
<div
class=“grid_4”>

14. use class
names to give
column widths
<div
class=“grid_12”>
<div
class=“grid_11”>
<div
class=“grid_2”>
<div
class=“grid_7”>
<div
class=“grid_4”>

15. use class
names to give
column widths
<div
class=“grid_12”>
<div
class=“grid_11”>
<div
class=“grid_2”>
<div
class=“grid_7”>
<div
class=“grid_4”>

16. use class
names to give
column widths
<div
class=“grid_12”>
<div
class=“grid_11”>
<div
class=“grid_2”>
<div
class=“grid_7”>
<div
class=“grid_4”>

17. use class
names to give
column widths
<div
class=“grid_12”>
<div
class=“grid_11”>
<div
class=“grid_2”>
<div
class=“grid_7”>
<div
class=“grid_4”>

18. use class
names to give
column widths
<div
class=“grid_12”>
<div
class=“grid_11”>
<div
class=“grid_2”>
<div
class=“grid_7”>
<div
class=“grid_4”>

19. use class
names to give
column widths
<div
class=“grid_12”>
<div
class=“grid_11”>
<div
class=“grid_2”>
<div
class=“grid_7”>
<div
class=“grid_4”>

20. use class
names to give
column widths
<div
class=“grid_12”>
<div
class=“grid_11”>
<div
class=“grid_2”>
<div
class=“grid_7”>
<div
class=“grid_4”>

21. use class
names to give
column widths
<div
class=“grid_12”>
<div
class=“grid_11”>
<div
class=“grid_2”>
<div
class=“grid_7”>
<div
class=“grid_4”>

22. use class
names to give
column widths
<div
class=“grid_12”>
<div
class=“grid_11”>
<div
class=“grid_2”>
<div
class=“grid_7”>
<div
class=“grid_4”>

23. use class
names to give
column widths
<div
class=“grid_12”>
<div
class=“grid_11”>
<div
class=“grid_2”>
<div
class=“grid_7”>
<div
class=“grid_4”>

24. use class
names to give
column widths
<div
class=“grid_12”>
<div
class=“grid_11”>
<div
class=“grid_2”>
<div
class=“grid_7”>
<div
class=“grid_4”>

25. use class
names to give
column widths
<div
class=“grid_12”>
<div
class=“grid_11”>
<div
class=“grid_2”>
<div
class=“grid_7”>
<div
class=“grid_4”>

26. ADD a CLEAR DIV
after each row
<div
class=“clear”>
<div
class=“clear”>

27. move divs by pulling and pushing
<div
class=“grid_3
push_1”> <div
class=“grid_3
pull_1”>

28. Add white spaces by using prefix/suffix
3-column space
<div
class=“grid_6
suffix_3”> OR <div
class=“grid_3
prefix_3”>

29. Avoid double-margins using alpha/omega

30. Avoid double-margins using alpha/omega
<div
class="grid_4"> <div
class="grid_5"> <div
class="grid_3">
<div
class="grid_4">
<div
class="grid_3">
<h1>3-­‐col</h1>
<h1>4-­‐col</h1>
<h1>3-­‐col</h1> </div>
</div>
</div>
<div
class="grid_4">
<div
class="grid_2">
<h1>4-­‐col</h1>
<h1>2-­‐col</h1>
</div>
</div>
</div>
<div
class="grid_1">
<h1>1-­‐col</h1>
</div>
<div
class="grid_4">
<h1>4-­‐col</h1>
</div>
</div>

31. Avoid double-margins using alpha/omega
<div
class="grid_4"> <div
class="grid_5"> <div
class="grid_3">
<div
class="grid_4">
<div
class="grid_3">
<h1>3-­‐col</h1>
<h1>4-­‐col</h1>
<h1>3-­‐col</h1> </div>
</div>
</div>
<div
class="grid_4">
<div
class="grid_2">
<h1>4-­‐col</h1>
<h1>2-­‐col</h1>
</div>
</div>
</div>
<div
class="grid_1">
<h1>1-­‐col</h1>
</div>
<div
class="grid_4">
<h1>4-­‐col</h1>
</div>
</div>

32. Avoid double-margins using alpha/omega
<div
class="grid_4"> <div
class="grid_5"> <div
class="grid_3">
<div
class="grid_4">
<div
class="grid_3">
<h1>3-­‐col</h1>
<h1>4-­‐col</h1>
<h1>3-­‐col</h1> </div>
</div>
</div>
<div
class="grid_4">
<div
class="grid_2">
<h1>4-­‐col</h1>
<h1>2-­‐col</h1>
</div>
</div>
</div>
<div
class="grid_1">
<h1>1-­‐col</h1>
</div>
<div
class="grid_4">
<h1>4-­‐col</h1>
</div>
</div>

33. Avoid double-margins using alpha/omega
<div
class="grid_4"> <div
class="grid_5"> <div
class="grid_3">
<div
class="grid_4">
<div
class="grid_3">
<h1>3-­‐col</h1>
<h1>4-­‐col</h1>
<h1>3-­‐col</h1> </div>
</div>
</div>
<div
class="grid_4">
<div
class="grid_2">
<h1>4-­‐col</h1>
<h1>2-­‐col</h1>
</div>
</div>
</div>
<div
class="grid_1">
<h1>1-­‐col</h1>
</div>
<div
class="grid_4">
<h1>4-­‐col</h1>
double margins!!
</div>
</div>

34. Avoid double-margins using alpha/omega
<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>

35. Avoid double-margins using alpha/omega
<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>

36. Avoid double-margins using alpha/omega
<div
class="grid_4">
<div
class="grid_4
alpha
omega">
<h1>4-­‐col</h1>
alpha:
</div>
no left margin
<div
class="grid_4
alpha
omega">
omega:
<h1>4-­‐col</h1>
no right margin
</div>
</div>

37. Avoid double-margins using alpha/omega
<div
class="grid_5">
<div
class="grid_1
alpha">
<div
class="grid_3
alpha">
<h1>1-­‐col</h1>
<h1>3-­‐col</h1>
</div>
</div>
<div
class="grid_4
omega">
<div
class="grid_2
omega">
<h1>4-­‐col</h1>
<h1>2-­‐col</h1>
</div>
</div> </div>

38. Avoid double-margins using alpha/omega
<div
class="grid_5">
<div
class="grid_1
alpha">
<div
class="grid_3
alpha">
<h1>1-­‐col</h1>
<h1>3-­‐col</h1>
</div>
</div>
<div
class="grid_4
omega">
<div
class="grid_2
omega">
<h1>4-­‐col</h1>
<h1>2-­‐col</h1>
</div>
</div> </div>

39. Avoid double-margins using alpha/omega
<div
class="grid_5">
<div
class="grid_1
alpha">
<div
class="grid_3
alpha">
<h1>1-­‐col</h1>
<h1>3-­‐col</h1>
</div>
</div>
<div
class="grid_4
omega">
<div
class="grid_2
omega">
<h1>4-­‐col</h1>
<h1>2-­‐col</h1>
</div>
</div> </div>

40. Avoid double-margins using alpha/omega
<div
class="grid_5">
<div
class="grid_1
alpha">
<div
class="grid_3
alpha">
<h1>1-­‐col</h1>
<h1>3-­‐col</h1>
</div>
</div>
<div
class="grid_4
omega">
<div
class="grid_2
omega">
<h1>4-­‐col</h1>
<h1>2-­‐col</h1>
</div>
</div> </div>

41. Avoid double-margins using alpha/omega
<div
class="grid_5">
<div
class="grid_1
alpha">
<div
class="grid_3
alpha">
<h1>1-­‐col</h1>
<h1>3-­‐col</h1>
</div>
</div>
<div
class="grid_4
omega">
<div
class="grid_2
omega">
<h1>4-­‐col</h1>
<h1>2-­‐col</h1>
</div>
</div> </div>

42. Avoid double-margins using alpha/omega
<div
class="grid_5">
<div
class="grid_1
alpha">
<div
class="grid_3
alpha">
<h1>1-­‐col</h1>
<h1>3-­‐col</h1>
</div>
</div>
<div
class="grid_4
omega">
<div
class="grid_2
omega">
<h1>4-­‐col</h1>
<h1>2-­‐col</h1>
</div>
</div> </div>

43. Avoid double-margins using alpha/omega
<div
class="grid_5">
<div
class="grid_1
alpha">
<div
class="grid_3
alpha">
<h1>1-­‐col</h1>
<h1>3-­‐col</h1>
</div>
</div>
<div
class="grid_4
omega">
<div
class="grid_2
omega">
<h1>4-­‐col</h1>
<h1>2-­‐col</h1>
</div>
</div> </div>

44. Avoid double-margins using alpha/omega
<div
class="grid_5">
<div
class="grid_1
alpha">
<div
class="grid_3
alpha">
<h1>1-­‐col</h1>
<h1>3-­‐col</h1>
</div>
</div>
<div
class="grid_4
omega">
<div
class="grid_2
omega">
<h1>4-­‐col</h1>
<h1>2-­‐col</h1>
</div>
</div> </div>

45. Avoid double-margins using alpha/omega
<div
class="grid_5">
<div
class="grid_1
alpha">
<div
class="grid_3
alpha">
<h1>1-­‐col</h1>
<h1>3-­‐col</h1>
</div>
</div>
<div
class="grid_4
omega">
<div
class="grid_2
omega">
<h1>4-­‐col</h1>
<h1>2-­‐col</h1>
</div>
</div> </div>

46. everything adds up

47. everything adds up
• All row widths should always add up to its
container div

48. everything adds up
• All row widths should always add up to its
container div
• For a 12-col grid:
<div
class=“grid_3
suffix_1”>
<div
class=“grid_7”>
<div
class=“grid_1”>

49. everything adds up
• All row widths should always add up to its
container div
• For a 12-col grid:
<div
class=“grid_3
suffix_1”>
3+1+7+1=12
<div
class=“grid_7”>
<div
class=“grid_1”>

50. everything adds up
• All row widths should always add up to its
container div
• For a 12-col grid:
<div
class=“grid_3
suffix_1”>
3+1+7+1=12
<div
class=“grid_7”>
<div
class=“grid_1”>
• 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”>

51. everything adds up
• All row widths should always add up to its
container div
• For a 12-col grid:
<div
class=“grid_3
suffix_1”>
3+1+7+1=12
<div
class=“grid_7”>
<div
class=“grid_1”>
• For a 16-col grid:
5+2+1+
<div
class=“grid_5”>
<div
class=“grid_2
prefix_1”> 2+1+2+3
<div
class=“grid_2
prefix_1”> =16
<div
class=“grid_2”>
<div
class=“grid_3”>

52. 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”>

53. 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”>

56. Speedtest 01
<!-­‐-­‐
CONTAINER
-­‐-­‐>
<div
class="container_16">

58. Speedtest 02
<!-­‐-­‐
SIDEBAR
-­‐-­‐>
<div
class="grid_4">
<!-­‐-­‐
ALL
CONTENT
-­‐-­‐>
<div
class="grid_12">

60. Speedtest 03
div.container_16{
background:#CCCCCC;
}

62. Speedtest 04
<!-­‐-­‐
PHOTO
-­‐-­‐>
<div
class="grid_4
prefix_8
alpha
omega">

64. Speedtest 05
<!-­‐-­‐
SUB1
-­‐-­‐>
<div
class="grid_4
alpha">
<!-­‐-­‐
SUB2
-­‐-­‐>
<div
class="grid_4">
<!-­‐-­‐
SUB3
-­‐-­‐>
<div
class="grid_4
omega">