ZURB CSS Grid Builder

CSS Code

1. /* --------------------------------------------------
2. Container
3. -------------------------------------------------- */
4. div#container, div.container { position: relative; width: 940px; margin: 0 auto; padding: 0; }
5.  
6.  
7. /* --------------------------------------------------
8. Grid
9. -------------------------------------------------- */
10. .column-row, .row { margin: 0 0 18px -20px; }
11. .column, .columns { float: left; display: inline; margin: 0 0 0 20px; }
12.  
13. .one { width: 60px; }
14. .two { width: 140px; }
15. .three { width: 220px; }
16. .four { width: 300px; }
17. .five { width: 380px; }
18. .six { width: 460px; }
19. .seven { width: 540px; }
20. .eight { width: 620px; }
21. .nine { width: 700px; }
22. .ten { width: 780px; }
23. .eleven { width: 860px; }
24. .twelve { width: 940px; }
25. .thirteen { width: 760px; }
26. .fourteen { width: 820px; }
27. .fifteen { width: 880px; }
28. .sixteen { width: 940px; }
29.  
30. .offset-by-one-half { margin-left: 40px; }
31. .offset-by-one { margin-left: 80px; }
32. .offset-by-two { margin-left: 160px; }
33. .offset-by-three { margin-left: 240px; }
34. .offset-by-four { margin-left: 320px; }
35. .offset-by-five { margin-left: 400px; }
36. .offset-by-six { margin-left: 480px; }
37. .offset-by-seven { margin-left: 560px; }
38. .offset-by-eight { margin-left: 640px; }
39. .offset-by-nine { margin-left: 720px; }
40. .offset-by-ten { margin-left: 800px; }
41. .offset-by-eleven { margin-left: 680px; }
42. .offset-by-twelve { margin-left: 740px; }
43. .offset-by-thirteen { margin-left: 800px; }
44. .offset-by-fourteen { margin-left: 880px; }
45.  
46. /* Clear the columns automagically, thanks @kneath */
47. .column-row:after, .row:after, .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
48. * html .column-row, * html .row, * html .clearfix { height: 1%; }
49. .column-row, .row, .clearfix { display: inline-block; }
50. .column-row, .row, .clearfix { display: block; }
51.  
52. /* IE6 Problems ---------- */
53. body.ie .column-row { width: 960px; }
54. body.ie .eight .column-row { width: 640px; }
55. body.ie .nine .column-row { width: 720px; }
56. body.ie .ten .column-row { width: 800px; }
57. body.ie .eleven .column-row { width: 880px; }
58. body.ie .twelve .column-row { width: 720px; }
59. body.ie .thirteen .column-row { width: 780px; }
60. body.ie .fourteen .column-row { width: 840px; }
61. body.ie .fifteen .column-row { width: 900px; }
62. body.ie .two-thirds .column-row { width: 640px; }