-
Notifications
You must be signed in to change notification settings - Fork 80
/
grid.css
68 lines (51 loc) · 1.11 KB
/
grid.css
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
/*
Grid
A simple grid with automatic columns
Markup:
<div class="grid {{modifier_class}}">
<div>Column</div>
<div>Column</div>
<div>Column</div>
<div>Column</div>
<div>Column</div>
<div>Column</div>
</div>
.-medium - start at 45rem
.-large - start at 80rem
Styleguide 5.0
*/
.grid {
--columns: auto-fit;
display: grid;
column-gap: var(--rhythm);
grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
}
@media (max-width: 45rem) {
.grid.-medium {
display: block;
}
}
@media (max-width: 80rem) {
.grid.-large {
display: block;
}
}
/*
Columns
Manually set column widths (Note: the syntax is passing a custom property with
a number value. KSS Docs only support modified classes, so ignore the term
[modifier class] and the dot before the number in the examples below).
Markup:
<div class="grid" style="--columns: {{modifier_class}}">
<div>Column</div>
<div>Column</div>
<div>Column</div>
<div>Column</div>
<div>Column</div>
<div>Column</div>
</div>
.2 - Two columns
.3 - Three columns
.4 - Four columns
Styleguide 5.1
*/