blob: a3b1be50a2582fa82fe16e34ae7e31a2cae8dcae (
plain) (
blame)
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
|
@use '../base' as *;
/* --------------------------------
File#: _1_auto-sized-grid
Title: Auto Sized Grid
Descr: A grid layout based on CSS Grid where the columns are automatically created according to a min-width value
Usage: codyhouse.co/license
-------------------------------- */
.grid-auto-xs, .grid-auto-sm, .grid-auto-md, .grid-auto-lg, .grid-auto-xl {
display: grid;
gap: var(--gap-y, 0px) var(--gap-x, 0px);
grid-template-columns: repeat(auto-fit, minmax(var(--col-min-width), 1fr)); // auto add new cols
}
.grid-auto-xs {
--col-min-width: 8rem;
}
.grid-auto-sm {
--col-min-width: 10rem;
}
.grid-auto-md {
--col-min-width: 15rem;
}
.grid-auto-lg {
--col-min-width: 20rem;
}
.grid-auto-xl {
--col-min-width: 25rem;
}
@each $breakpoint, $value in $breakpoints {
@include breakpoint(#{$breakpoint}) {
.grid-auto-xs\@#{$breakpoint} {
--col-min-width: 8rem;
}
.grid-auto-sm\@#{$breakpoint} {
--col-min-width: 10rem;
}
.grid-auto-md\@#{$breakpoint} {
--col-min-width: 15rem;
}
.grid-auto-lg\@#{$breakpoint} {
--col-min-width: 20rem;
}
.grid-auto-xl\@#{$breakpoint} {
--col-min-width: 25rem;
}
}
}
|
