-
Notifications
You must be signed in to change notification settings - Fork 1
/
_grid.scss
120 lines (106 loc) · 2.52 KB
/
_grid.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
/*!
* Spry Grid
*/
.grid {
display: grid;
gap: var(--spry-gap);
}
.row {
display: flex;
flex-wrap: wrap;
gap: var(--spry-gap);
> * {
flex: 0 100%;
}
&.columns-fixed > *,
> .col-fixed {
flex: 1;
}
&.columns-auto > *{
flex: auto;
min-width: auto;
max-width: none;
}
> .col-auto {
flex: 0 auto;
min-width: auto;
max-width: none;
}
}
@for $i from 1 through 12 {
.grid.columns-#{$i} {
grid-template-columns: repeat($i, minmax(0, 1fr));
}
.grid-#{$i}00 {
display: grid;
grid-template-columns: repeat( auto-fit, minmax(#{$i}00px, 1fr));
gap: var(--spry-gap);
}
.row.columns-#{$i}>* {
flex: none;
flex-basis: calc(#{calc(round(percentage(calc(1 / $i)) * 1000) / 1000)} - ((var(--spry-gap) * (#{$i} - 1)) / #{$i}));
}
.row>.col-#{$i} {
flex: calc(#{calc(round(percentage(calc($i / 12)) * 1000) / 1000)} - var(--spry-gap));
max-width: calc(#{calc(round(percentage(calc($i / 12)) * 1000) / 1000)} - (((var(--spry-gap) * (#{$i} / 12)) - var(--spry-gap)) / (#{$i} / 12)));
}
.grid>.col-#{$i} {
@if $i > 1 {
grid-column: 1 / span #{$i};
}
}
}
@each $breakpoint, $breakpoint_width in $breakpoints {
.#{$breakpoint}-mw {
max-width: $breakpoint_width;
}
@media screen and (min-width: $breakpoint_width) {
.row > *,
.row.#{$breakpoint}-columns-fixed > *,
.row > .#{$breakpoint}-col-fixed {
flex: 1;
}
.row.#{$breakpoint}-columns-auto > * {
flex: auto;
min-width: auto;
max-width: none;
}
.row > .#{$breakpoint}-col-auto {
flex: 0 auto;
min-width: auto;
max-width: none;
}
@for $i from 1 through 12 {
.grid.#{$breakpoint}-columns-#{$i} {
grid-template-columns: repeat($i, minmax(0, 1fr))
}
.row.#{$breakpoint}-columns-#{$i} > * {
flex: none;
flex-basis: calc(#{calc(round(percentage(calc(1 / $i)) * 1000) / 1000)} - ((var(--spry-gap) * (#{$i} - 1)) / #{$i}));
}
.row > .#{$breakpoint}-col-#{$i} {
flex: calc(#{calc(round(percentage(calc($i / 12)) * 1000) / 1000)} - var(--spry-gap));
max-width: calc(#{calc(round(percentage(calc($i / 12)) * 1000) / 1000)} - (((var(--spry-gap) * (#{$i} / 12)) - var(--spry-gap)) / (#{$i} / 12)));
}
.grid > .#{$breakpoint}-col-#{$i} {
@if $i > 1 {
grid-column: 1 / span #{$i};
}
}
}
}
}
@each $s, $space in $spacing {
.g-#{$s} {
gap: var(--spry-gap);
--spry-gap: #{$space};
}
@each $breakpoint, $breakpoint_width in $breakpoints {
@media screen and (min-width: $breakpoint_width) {
.#{$breakpoint}-g-#{$s} {
gap: var(--spry-gap);
--spry-gap: #{$space};
}
}
}
}