_grid.scss 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. /**
  2. * Grid
  3. * --------------------------------------------------
  4. * Using flexbox for the grid, inspired by Philip Walton:
  5. * http://philipwalton.github.io/solved-by-flexbox/demos/grids/
  6. * By default each .col within a .row will evenly take up
  7. * available width, and the height of each .col with take
  8. * up the height of the tallest .col in the same .row.
  9. */
  10. .row {
  11. @include display-flex();
  12. padding: ($grid-padding-width / 2);
  13. width: 100%;
  14. }
  15. .row-wrap {
  16. @include flex-wrap(wrap);
  17. }
  18. .row-no-padding {
  19. padding: 0;
  20. > .col {
  21. padding: 0;
  22. }
  23. }
  24. .row + .row {
  25. margin-top: ($grid-padding-width / 2) * -1;
  26. padding-top: 0;
  27. }
  28. .col {
  29. @include flex(1);
  30. display: block;
  31. padding: ($grid-padding-width / 2);
  32. width: 100%;
  33. }
  34. /* Vertically Align Columns */
  35. /* .row-* vertically aligns every .col in the .row */
  36. .row-top {
  37. @include align-items(flex-start);
  38. }
  39. .row-bottom {
  40. @include align-items(flex-end);
  41. }
  42. .row-center {
  43. @include align-items(center);
  44. }
  45. .row-stretch {
  46. @include align-items(stretch);
  47. }
  48. .row-baseline {
  49. @include align-items(baseline);
  50. }
  51. /* .col-* vertically aligns an individual .col */
  52. .col-top {
  53. @include align-self(flex-start);
  54. }
  55. .col-bottom {
  56. @include align-self(flex-end);
  57. }
  58. .col-center {
  59. @include align-self(center);
  60. }
  61. /* Column Offsets */
  62. .col-offset-10 {
  63. margin-left: 10%;
  64. }
  65. .col-offset-20 {
  66. margin-left: 20%;
  67. }
  68. .col-offset-25 {
  69. margin-left: 25%;
  70. }
  71. .col-offset-33, .col-offset-34 {
  72. margin-left: 33.3333%;
  73. }
  74. .col-offset-50 {
  75. margin-left: 50%;
  76. }
  77. .col-offset-66, .col-offset-67 {
  78. margin-left: 66.6666%;
  79. }
  80. .col-offset-75 {
  81. margin-left: 75%;
  82. }
  83. .col-offset-80 {
  84. margin-left: 80%;
  85. }
  86. .col-offset-90 {
  87. margin-left: 90%;
  88. }
  89. /* Explicit Column Percent Sizes */
  90. /* By default each grid column will evenly distribute */
  91. /* across the grid. However, you can specify individual */
  92. /* columns to take up a certain size of the available area */
  93. .col-10 {
  94. @include flex(0, 0, 10%);
  95. max-width: 10%;
  96. }
  97. .col-20 {
  98. @include flex(0, 0, 20%);
  99. max-width: 20%;
  100. }
  101. .col-25 {
  102. @include flex(0, 0, 25%);
  103. max-width: 25%;
  104. }
  105. .col-33, .col-34 {
  106. @include flex(0, 0, 33.3333%);
  107. max-width: 33.3333%;
  108. }
  109. .col-40 {
  110. @include flex(0, 0, 40%);
  111. max-width: 40%;
  112. }
  113. .col-50 {
  114. @include flex(0, 0, 50%);
  115. max-width: 50%;
  116. }
  117. .col-60 {
  118. @include flex(0, 0, 60%);
  119. max-width: 60%;
  120. }
  121. .col-66, .col-67 {
  122. @include flex(0, 0, 66.6666%);
  123. max-width: 66.6666%;
  124. }
  125. .col-75 {
  126. @include flex(0, 0, 75%);
  127. max-width: 75%;
  128. }
  129. .col-80 {
  130. @include flex(0, 0, 80%);
  131. max-width: 80%;
  132. }
  133. .col-90 {
  134. @include flex(0, 0, 90%);
  135. max-width: 90%;
  136. }
  137. /* Responsive Grid Classes */
  138. /* Adding a class of responsive-X to a row */
  139. /* will trigger the flex-direction to */
  140. /* change to column and add some margin */
  141. /* to any columns in the row for clearity */
  142. @include responsive-grid-break('.responsive-sm', $grid-responsive-sm-break);
  143. @include responsive-grid-break('.responsive-md', $grid-responsive-md-break);
  144. @include responsive-grid-break('.responsive-lg', $grid-responsive-lg-break);