zerogrid.css 3.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. /*
  2. Zerotheme.com | Free Html5 Responsive Templates
  3. Zerogrid - A Single Grid System for Responsive Design
  4. Author: Kimmy
  5. Version : 3.0
  6. Author URI: https://www.zerotheme.com/
  7. */
  8. /* -------------------------------------------- */
  9. /* ------------------Grid System--------------- */
  10. .zerogrid{ width: 1200px; position: relative; margin: 0 auto; padding: 0px;}
  11. .zerogrid:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
  12. .zerogrid .f-right{float: right!important;}
  13. .zerogrid .f-left{float: left!important;}
  14. .zerogrid .row{}
  15. .zerogrid .row:before,.row:after { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }
  16. .zerogrid .row:after{clear: both; }
  17. .zerogrid .row{zoom: 1;}
  18. .zerogrid .wrap-col{margin:10px;}
  19. .zerogrid .col-1-2, .zerogrid .col-1-3, .zerogrid .col-2-3, .zerogrid .col-1-4, .zerogrid .col-2-4, .zerogrid .col-3-4, .zerogrid .col-1-5, .zerogrid .col-2-5, .zerogrid .col-3-5, .zerogrid .col-4-5, .zerogrid .col-1-6, .zerogrid .col-2-6, .zerogrid .col-3-6, .zerogrid .col-4-6, .zerogrid .col-5-6{float:left; display: inline-block;}
  20. .zerogrid .col-full{width:100%;}
  21. .zerogrid .col-1-2,.zerogrid .col-1-2-fixed{width:50%;}
  22. .zerogrid .offset-1-2{margin-left: 50%;}
  23. .zerogrid .col-1-3,.zerogrid .col-1-3-fixed{width:33.33%;}
  24. .zerogrid .col-2-3,.zerogrid .col-2-3-fixed{width:66.66%;}
  25. .zerogrid .offset-1-3{margin-left: 33.33%;}
  26. .zerogrid .offset-2-3{margin-left: 66.66%;}
  27. .zerogrid .col-1-4,.zerogrid .col-1-4-fixed{width:25%;}
  28. .zerogrid .col-2-4,.zerogrid .col-2-4-fixed{width:50%;}
  29. .zerogrid .col-3-4,.zerogrid .col-3-4-fixed{width:75%;}
  30. .zerogrid .offset-1-4{margin-left: 25%;}
  31. .zerogrid .offset-2-4{margin-left: 50%;}
  32. .zerogrid .offset-3-4{margin-left: 75%;}
  33. .zerogrid .col-1-5,.zerogrid .col-1-5-fixed{width:20%;}
  34. .zerogrid .col-2-5,.zerogrid .col-2-5-fixed{width:40%;}
  35. .zerogrid .col-3-5,.zerogrid .col-3-5-fixed{width:60%;}
  36. .zerogrid .col-4-5,.zerogrid .col-4-5-fixed{width:80%;}
  37. .zerogrid .offset-1-5{margin-left: 20%;}
  38. .zerogrid .offset-2-5{margin-left: 40%;}
  39. .zerogrid .offset-3-5{margin-left: 60%;}
  40. .zerogrid .offset-4-5{margin-left: 80%;}
  41. .zerogrid .col-1-6,.zerogrid .col-1-6-fixed{width:16.66%;}
  42. .zerogrid .col-2-6,.zerogrid .col-2-6-fixed{width:33.33%;}
  43. .zerogrid .col-3-6,.zerogrid .col-3-6-fixed{width:50%;}
  44. .zerogrid .col-4-6,.zerogrid .col-4-6-fixed{width:66.66%;}
  45. .zerogrid .col-5-6,.zerogrid .col-5-6-fixed{width:83.33%;}
  46. .zerogrid .offset-1-6{margin-left: 16.66%;}
  47. .zerogrid .offset-2-6{margin-left: 33.33%;}
  48. .zerogrid .offset-3-6{margin-left: 50%;}
  49. .zerogrid .offset-4-6{margin-left: 66.66%;}
  50. .zerogrid .offset-5-6{margin-left: 83.33%;}
  51. @media only screen and (min-width: 960px) and (max-width: 1199px) {
  52. .zerogrid{width:960px;}
  53. }
  54. @media only screen and (min-width: 768px) and (max-width: 959px) {
  55. .zerogrid{width:768px;}
  56. }
  57. @media only screen and (max-width: 767px) {
  58. .zerogrid, .zerogrid .col-1-2, .zerogrid .col-1-3, .zerogrid .col-2-3, .zerogrid .col-1-4, .zerogrid .col-2-4, .zerogrid .col-3-4, .zerogrid .col-1-5, .zerogrid .col-2-5, .zerogrid .col-3-5, .zerogrid .col-4-5, .zerogrid .col-1-6, .zerogrid .col-2-6, .zerogrid .col-3-6, .zerogrid .col-4-6, .zerogrid .col-5-6{width:100%;}
  59. .zerogrid .offset-1-2, .zerogrid .offset-1-3, .zerogrid .offset-2-3, .zerogrid .offset-1-4, .zerogrid .offset-2-4, .zerogrid .offset-3-4, .zerogrid .offset-1-5, .zerogrid .offset-2-5, .zerogrid .offset-3-5, .zerogrid .offset-4-5, .zerogrid .offset-1-6, .zerogrid .offset-2-6, .zerogrid .offset-3-6, .zerogrid .offset-4-6, .zerogrid .offset-5-6{margin-left:0;}
  60. }