-
Notifications
You must be signed in to change notification settings - Fork 0
/
boxgrid.css
58 lines (55 loc) · 2.49 KB
/
boxgrid.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
.row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); /* automatic */
gap: 0.25rem;
margin-bottom: 0.25rem;
}
.row.c1 { grid-template-columns: 1fr; }
.row.c2 { grid-template-columns: repeat(2, 1fr); }
.row.c3 { grid-template-columns: repeat(3, 1fr); }
.row.c4 { grid-template-columns: repeat(4, 1fr); }
.row.c5 { grid-template-columns: repeat(5, 1fr); }
.row.c6 { grid-template-columns: repeat(6, 1fr); }
.row.c7 { grid-template-columns: repeat(7, 1fr); }
.row.c8 { grid-template-columns: repeat(8, 1fr); }
.row.c9 { grid-template-columns: repeat(9, 1fr); }
.row.c10 { grid-template-columns: repeat(10, 1fr); }
.row.c11 { grid-template-columns: repeat(11, 1fr); }
.row.c12 { grid-template-columns: repeat(12, 1fr); }
.row.c13 { grid-template-columns: repeat(13, 1fr); }
.row.c14 { grid-template-columns: repeat(14, 1fr); }
.row.c15 { grid-template-columns: repeat(15, 1fr); }
.row.c16 { grid-template-columns: repeat(16, 1fr); }
.row.g0 { gap: 0; margin-bottom: 0; }
.row.g1 { gap: 0.25rem; margin-bottom: 0.25rem; } /* default */
.row.g2 { gap: 0.50rem; margin-bottom: 0.50rem; }
.row.g3 { gap: 0.75rem; margin-bottom: 0.75rem; }
.row.g4 { gap: 1.00rem; margin-bottom: 1.00rem; }
.row.g5 { gap: 1.25rem; margin-bottom: 1.25rem; }
.row.g6 { gap: 1.50rem; margin-bottom: 1.50rem; }
.row.g7 { gap: 1.75rem; margin-bottom: 1.75rem; }
.row.g8 { gap: 2.00rem; margin-bottom: 2.00rem; }
.row.g9 { gap: 2.25rem; margin-bottom: 2.25rem; }
.row.g10 { gap: 2.50rem; margin-bottom: 2.50rem; }
.row.g11 { gap: 2.75rem; margin-bottom: 2.75rem; }
.row.g12 { gap: 3.00rem; margin-bottom: 3.00rem; }
.row.g13 { gap: 3.25rem; margin-bottom: 3.25rem; }
.row.g14 { gap: 3.50rem; margin-bottom: 3.50rem; }
.row.g15 { gap: 3.75rem; margin-bottom: 3.75rem; }
.row.g16 { gap: 4.00rem; margin-bottom: 4.00rem; }
.row > .col-1 { grid-column: span 1; } /* default */
.row > .col-2 { grid-column: span 2; }
.row > .col-3 { grid-column: span 3; }
.row > .col-4 { grid-column: span 4; }
.row > .col-5 { grid-column: span 5; }
.row > .col-6 { grid-column: span 6; }
.row > .col-7 { grid-column: span 7; }
.row > .col-8 { grid-column: span 8; }
.row > .col-9 { grid-column: span 9; }
.row > .col-10 { grid-column: span 10; }
.row > .col-11 { grid-column: span 11; }
.row > .col-12 { grid-column: span 12; }
.row > .col-13 { grid-column: span 13; }
.row > .col-14 { grid-column: span 14; }
.row > .col-15 { grid-column: span 15; }
.row > .col-16 { grid-column: span 16; }