You are here

Home » API reference » Layout 8

grid.css in Layout 8 

/* Generic column setup */
.rld-col {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  float:left;
}



/* 1. 3 Column Grid 0px - 349px 
----------------------------------------------------------------------------- */

.rld-container-3 .rld-span_1 {
  width:33.3333333333%;
}
.rld-container-3 .rld-span_2 {
  width:66.6666666667%;
}
.rld-container-3 .rld-span_3 {
  width:100%;
}

/* 2. 6 Column Grid 350px - 759px 
----------------------------------------------------------------------------- */

.rld-container-6 .rld-span_1 {
  width:16.6666666667%;
}
.rld-container-6 .rld-span_2 {
  width:33.3333333333%;
}
.rld-container-6 .rld-span_3 {
  width:50%;
}
.rld-container-6 .rld-span_4 {
  width:66.6666666667%;
}
.rld-container-6 .rld-span_5 {
  width:83.3333333333%;
}
.rld-container-6 .rld-span_6 {
  width:100%;
}

/* 3. 10 Column Grid 760px - 959px 
----------------------------------------------------------------------------- */
.rld-container-10 .rld-span_1 {
  width:10%;
}
.rld-container-10 .rld-span_2 {
  width:20%;
}
.rld-container-10 .rld-span_3 {
  width:30%;
}
.rld-container-10 .rld-span_4 {
  width:40%;
}
.rld-container-10 .rld-span_5 {
  width:50%;
}
.rld-container-10 .rld-span_6 {
  width:60%;
}
.rld-container-10 .rld-span_7 {
  width:70%;
}
.rld-container-10 .rld-span_8 {
  width:80%;
}
.rld-container-10 .rld-span_9 {
  width:90%;
}
.rld-container-10 .rld-span_10 {
  width:100%;
}

/* 4. 12 Column Grid 960px - Infinity 
----------------------------------------------------------------------------- */

.rld-container-12 .rld-span_1 {
  width:8.3333333333%;
}
.rld-container-12 .rld-span_2 {
  width:16.6666666667%;
}
.rld-container-12 .rld-span_3 {
  width:25%;
}
.rld-container-12 .rld-span_4 {
  width:33.3333333333%;
}
.rld-container-12 .rld-span_5 {
  width:41.6666666667%;
}
.rld-container-12 .rld-span_6 {
  width:50%;
}
.rld-container-12 .rld-span_7 {
  width:58.3333333333%;
}
.rld-container-12 .rld-span_8 {
  width:66.6666666667%;
}
.rld-container-12 .rld-span_9 {
  width:75%;
}
.rld-container-12 .rld-span_10 {
  width:83.3333333333%;
}
.rld-container-12 .rld-span_11 {
  width:91.6666666667%;
}
.rld-container-12 .rld-span_12 {
  width:100%;
}

File

designer/assets/css/grid.css
View source 
  1. /* Generic column setup */

  2. .rld-col {

  3.   -webkit-box-sizing:border-box;

  4.   -moz-box-sizing:border-box;

  5.   box-sizing:border-box;

  6.   float:left;

  7. }

  8. 

  9. 

  10. 

  11. /* 1. 3 Column Grid 0px - 349px 

  12. ----------------------------------------------------------------------------- */

  13. 

  14. .rld-container-3 .rld-span_1 {

  15.   width:33.3333333333%;

  16. }

  17. .rld-container-3 .rld-span_2 {

  18.   width:66.6666666667%;

  19. }

  20. .rld-container-3 .rld-span_3 {

  21.   width:100%;

  22. }

  23. 

  24. /* 2. 6 Column Grid 350px - 759px 

  25. ----------------------------------------------------------------------------- */

  26. 

  27. .rld-container-6 .rld-span_1 {

  28.   width:16.6666666667%;

  29. }

  30. .rld-container-6 .rld-span_2 {

  31.   width:33.3333333333%;

  32. }

  33. .rld-container-6 .rld-span_3 {

  34.   width:50%;

  35. }

  36. .rld-container-6 .rld-span_4 {

  37.   width:66.6666666667%;

  38. }

  39. .rld-container-6 .rld-span_5 {

  40.   width:83.3333333333%;

  41. }

  42. .rld-container-6 .rld-span_6 {

  43.   width:100%;

  44. }

  45. 

  46. /* 3. 10 Column Grid 760px - 959px 

  47. ----------------------------------------------------------------------------- */

  48. .rld-container-10 .rld-span_1 {

  49.   width:10%;

  50. }

  51. .rld-container-10 .rld-span_2 {

  52.   width:20%;

  53. }

  54. .rld-container-10 .rld-span_3 {

  55.   width:30%;

  56. }

  57. .rld-container-10 .rld-span_4 {

  58.   width:40%;

  59. }

  60. .rld-container-10 .rld-span_5 {

  61.   width:50%;

  62. }

  63. .rld-container-10 .rld-span_6 {

  64.   width:60%;

  65. }

  66. .rld-container-10 .rld-span_7 {

  67.   width:70%;

  68. }

  69. .rld-container-10 .rld-span_8 {

  70.   width:80%;

  71. }

  72. .rld-container-10 .rld-span_9 {

  73.   width:90%;

  74. }

  75. .rld-container-10 .rld-span_10 {

  76.   width:100%;

  77. }

  78. 

  79. /* 4. 12 Column Grid 960px - Infinity 

  80. ----------------------------------------------------------------------------- */

  81. 

  82. .rld-container-12 .rld-span_1 {

  83.   width:8.3333333333%;

  84. }

  85. .rld-container-12 .rld-span_2 {

  86.   width:16.6666666667%;

  87. }

  88. .rld-container-12 .rld-span_3 {

  89.   width:25%;

  90. }

  91. .rld-container-12 .rld-span_4 {

  92.   width:33.3333333333%;

  93. }

  94. .rld-container-12 .rld-span_5 {

  95.   width:41.6666666667%;

  96. }

  97. .rld-container-12 .rld-span_6 {

  98.   width:50%;

  99. }

  100. .rld-container-12 .rld-span_7 {

  101.   width:58.3333333333%;

  102. }

  103. .rld-container-12 .rld-span_8 {

  104.   width:66.6666666667%;

  105. }

  106. .rld-container-12 .rld-span_9 {

  107.   width:75%;

  108. }

  109. .rld-container-12 .rld-span_10 {

  110.   width:83.3333333333%;

  111. }

  112. .rld-container-12 .rld-span_11 {

  113.   width:91.6666666667%;

  114. }

  115. .rld-container-12 .rld-span_12 {

  116.   width:100%;

  117. }