-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathgrid.html
More file actions
103 lines (84 loc) · 3.24 KB
/
grid.html
File metadata and controls
103 lines (84 loc) · 3.24 KB
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
<h1>Decanter Grid</h1>
<h2>12 Grid</h2>
The Decanter theme provides a responsive 12 column grid which is compatible with tailwind .col-* classes.
<div class="rs-grid grid-demo">
<div class="">1</div>
<div class="">2</div>
<div class="">3</div>
<div class="">4</div>
<div class="">5</div>
<div class="">6</div>
<div class="">7</div>
<div class="">8</div>
<div class="">9</div>
<div class="">10</div>
<div class="">11</div>
<div class="">12</div>
</div>
<h3>Responsive Column Span Classes</h3>
<div class="rs-grid grid-demo">
<div class="col-full">.col-full</div>
<div class="col-half">.col-half</div>
<div class="col-half">.col-half</div>
<div class="col-quarter">.col-quarter</div>
<div class="col-quarter">.col-quarter</div>
<div class="col-quarter">.col-quarter</div>
<div class="col-quarter">.col-quarter</div>
<div class="col-third">.col-third</div>
<div class="col-third">.col-third</div>
<div class="col-third">.col-third</div>
<div class="col-sixth">.col-sixth</div>
<div class="col-sixth">.col-sixth</div>
<div class="col-sixth">.col-sixth</div>
<div class="col-sixth">.col-sixth</div>
<div class="col-sixth">.col-sixth</div>
<div class="col-sixth">.col-sixth</div>
<div class="col-twelfth">.col-twelfth</div>
<div class="col-twelfth">.col-twelfth</div>
<div class="col-twelfth">.col-twelfth</div>
<div class="col-twelfth">.col-twelfth</div>
<div class="col-twelfth">.col-twelfth</div>
<div class="col-twelfth">.col-twelfth</div>
<div class="col-twelfth">.col-twelfth</div>
<div class="col-twelfth">.col-twelfth</div>
<div class="col-twelfth">.col-twelfth</div>
<div class="col-twelfth">.col-twelfth</div>
<div class="col-twelfth">.col-twelfth</div>
<div class="col-twelfth">.col-twelfth</div>
</div>
<div class="rs-grid grid-demo">
<div class="col-third">.col-third</div>
<div class="col-twothird">.col-twothird</div>
<div class="col-threequarter">.col-threequarter</div>
<div class="col-quarter">.col-quarter</div>
</div>
<h3>Decanter .col-span-x (not responsive)</h3>
<div class="rs-grid grid-demo">
<div class="col-span-6">.col-span-6</div>
<div class="col-span-6">.col-span-6</div>
<div class="col-span-4">.col-span-4</div>
<div class="col-span-4">.col-span-4</div>
<div class="col-span-4">.col-span-4</div>
<div class="col-span-3">.col-span-3</div>
<div class="col-span-3">.col-span-3</div>
<div class="col-span-3">.col-span-3</div>
<div class="col-span-3">.col-span-3</div>
<div class="col-span-2">.col-span-2</div>
<div class="col-span-2">.col-span-2</div>
<div class="col-span-2">.col-span-2</div>
<div class="col-span-2">.col-span-2</div>
<div class="col-span-2">.col-span-2</div>
<div class="col-span-2">.col-span-2</div>
<div class="col-span-1">.col-span-1</div>
<div class="col-span-1">.col-span-1</div>
<div class="col-span-1">.col-span-1</div>
<div class="col-span-1">.col-span-1</div>
<div class="col-span-1">.col-span-1</div>
<div class="col-span-1">.col-span-1</div>
<div class="col-span-1">.col-span-1</div>
<div class="col-span-1">.col-span-1</div>
<div class="col-span-1">.col-span-1</div>
<div class="col-span-1">.col-span-1</div>
<div class="col-span-1">.col-span-1</div>
<div class="col-span-1">.col-span-1</div>
</div>