1 | @import "variables";
|
2 |
|
3 | @each $value in $columns {
|
4 | .grid-cols\:#{$value} {
|
5 | grid-template-columns: repeat(#{$value}, minmax(0, 1fr));
|
6 | }
|
7 | .grid-rows\:#{$value} {
|
8 | grid-template-rows: repeat(#{$value}, minmax(0, 1fr));
|
9 | }
|
10 | .col-span\:#{$value} {
|
11 | grid-column: span $value / span $value;
|
12 | }
|
13 | .row-span\:#{$value} {
|
14 | grid-row: span $value / span $value;
|
15 | }
|
16 | }
|
17 |
|
18 | .col-span\:auto {
|
19 | grid-column: auto;
|
20 | }
|
21 | .col-span\:full {
|
22 | grid-column: 1 / -1;
|
23 | }
|
24 | .row-span\:auto {
|
25 | grid-row: auto;
|
26 | }
|
27 | .row-span\:full {
|
28 | grid-row: 1 / -1;
|
29 | }
|
30 |
|
31 | @each $value in $grid-columns {
|
32 | .col-start\:#{$value} {
|
33 | grid-column-start: $value;
|
34 | }
|
35 | .col-end\:#{$value} {
|
36 | grid-column-end: $value;
|
37 | }
|
38 | .row-start\:#{$value} {
|
39 | grid-row-start: $value;
|
40 | }
|
41 | .row-end\:#{$value} {
|
42 | grid-row-end: $value;
|
43 | }
|
44 | }
|
45 |
|
46 | .col-start\:auto {
|
47 | grid-column-start: auto;
|
48 | }
|
49 | .col-end\:auto {
|
50 | grid-column-end: auto;
|
51 | }
|
52 | .row-start\:auto {
|
53 | grid-row-start: auto;
|
54 | }
|
55 | .row-end\:auto {
|
56 | grid-row-end: auto;
|
57 | }
|
58 |
|
59 | @each $name, $value in $grid-flows {
|
60 | .grid-flow\:#{$name} {
|
61 | grid-auto-flow: $value;
|
62 | }
|
63 | }
|
64 |
|
65 | @each $name, $value in $autos {
|
66 | .auto-cols\:#{$name} {
|
67 | grid-auto-columns: $value;
|
68 | }
|
69 | }
|
70 |
|
71 | @each $name, $value in $autos {
|
72 | .auto-rows\:#{$name} {
|
73 | grid-auto-rows: $value;
|
74 | }
|
75 | } |
\ | No newline at end of file |