grid.css 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223
  1. @responsive {
  2. .grid {
  3. display: grid;
  4. }
  5. .cols-2 {
  6. grid-template-columns: repeat(2, 1fr);
  7. }
  8. .cols-auto {
  9. grid-template-columns: auto;
  10. grid-auto-flow: column;
  11. }
  12. .cols-auto-1fr {
  13. grid-template-columns: auto 1fr;
  14. }
  15. .gap-0 {
  16. grid-gap: 0;
  17. }
  18. .gapx-0 {
  19. grid-column-gap: 0;
  20. }
  21. .gapy-0 {
  22. grid-row-gap: 0;
  23. }
  24. .gap-1 {
  25. grid-gap: theme('padding.1');
  26. }
  27. .gapx-1 {
  28. grid-column-gap: theme('padding.1');
  29. }
  30. .gapy-1 {
  31. grid-row-gap: theme('padding.1');
  32. }
  33. .gap-2 {
  34. grid-gap: theme('padding.2');
  35. }
  36. .gapx-2 {
  37. grid-column-gap: theme('padding.2');
  38. }
  39. .gapy-2 {
  40. grid-row-gap: theme('padding.2');
  41. }
  42. .gap-3 {
  43. grid-gap: theme('padding.3');
  44. }
  45. .gapx-3 {
  46. grid-column-gap: theme('padding.3');
  47. }
  48. .gapy-3 {
  49. grid-row-gap: theme('padding.3');
  50. }
  51. .gap-4 {
  52. grid-gap: theme('padding.4');
  53. }
  54. .gapx-4 {
  55. grid-column-gap: theme('padding.4');
  56. }
  57. .gapy-4 {
  58. grid-row-gap: theme('padding.4');
  59. }
  60. .gap-6 {
  61. grid-gap: theme('padding.6');
  62. }
  63. .gapx-6 {
  64. grid-column-gap: theme('padding.6');
  65. }
  66. .gapy-6 {
  67. grid-row-gap: theme('padding.6');
  68. }
  69. .gap-8 {
  70. grid-gap: theme('padding.8');
  71. }
  72. .gapx-8 {
  73. grid-column-gap: theme('padding.8');
  74. }
  75. .gapy-8 {
  76. grid-row-gap: theme('padding.8');
  77. }
  78. .gap-12 {
  79. grid-gap: theme('padding.12');
  80. }
  81. .gapx-12 {
  82. grid-column-gap: theme('padding.12');
  83. }
  84. .gapy-12 {
  85. grid-row-gap: theme('padding.12');
  86. }
  87. .gap-16 {
  88. grid-gap: theme('padding.16');
  89. }
  90. .gapx-16 {
  91. grid-column-gap: theme('padding.16');
  92. }
  93. .gapy-16 {
  94. grid-row-gap: theme('padding.16');
  95. }
  96. .span-1 {
  97. grid-column-end: span 1;
  98. }
  99. .span-2 {
  100. grid-column-end: span 2;
  101. }
  102. .span-3 {
  103. grid-column-end: span 3;
  104. }
  105. .span-4 {
  106. grid-column-end: span 4;
  107. }
  108. .span-5 {
  109. grid-column-end: span 5;
  110. }
  111. .span-6 {
  112. grid-column-end: span 6;
  113. }
  114. .span-end {
  115. grid-column-end: -1;
  116. }
  117. .start-1 {
  118. grid-column-start: 1;
  119. }
  120. .start-2 {
  121. grid-column-start: 2;
  122. }
  123. .start-3 {
  124. grid-column-start: 3;
  125. }
  126. .start-4 {
  127. grid-column-start: 4;
  128. }
  129. .start-5 {
  130. grid-column-start: 5;
  131. }
  132. .start-6 {
  133. grid-column-start: 6;
  134. }
  135. .align-self-start {
  136. align-self: start;
  137. }
  138. .align-self-end {
  139. align-self: end;
  140. }
  141. .align-self-center {
  142. align-self: center;
  143. }
  144. .align-self-stretch {
  145. align-self: stretch;
  146. }
  147. .place-center {
  148. align-items: center;
  149. justify-items: center;
  150. align-content: center;
  151. justify-content: center;
  152. }
  153. .place-items-center {
  154. align-items: center;
  155. justify-items: center;
  156. }
  157. .place-content-center {
  158. align-content: center;
  159. justify-content: center;
  160. }
  161. .justify-self-start {
  162. justify-self: start;
  163. }
  164. .justify-self-end {
  165. justify-self: end;
  166. }
  167. .justify-self-center {
  168. justify-self: center;
  169. }
  170. }