Columns
Since 1.8.0

Class

1
.columns
Copied!
1
.column
Copied!
1
.column--{1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12}
Copied!

Code Sample

.columns

1
<div class="columns">
2
<div class="column bg--gainsboro rounded--6 pa--1">
3
<kbd>.column</kbd>
4
</div>
5
<div class="column bg--gainsboro rounded--6 pa--1">
6
<kbd>.column</kbd>
7
</div>
8
<div class="column bg--gainsboro rounded--6 pa--1">
9
<kbd>.column</kbd>
10
</div>
11
</div>
Copied!

.columns--nogap

1
<div class="columns--nogap">
2
<div class="column bg--gainsboro rounded--6 pa--1">
3
<kbd>.column</kbd>
4
</div>
5
<div class="column bg--gainsboro rounded--6 pa--1">
6
<kbd>.column</kbd>
7
</div>
8
<div class="column bg--gainsboro rounded--6 pa--1">
9
<kbd>.column</kbd>
10
</div>
11
<div class="column bg--gainsboro rounded--6 pa--1">
12
<kbd>.column</kbd>
13
</div>
14
</div>
Copied!

.column--{1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12}

1
<div class="column--1 bg--gainsboro rounded--6 pa--1">
2
<kbd>.column--1</kbd>
3
</div>
4
<div class="column--2 bg--gainsboro rounded--6 pa--1">
5
<kbd>.column--2</kbd>
6
</div>
7
<div class="column--3 bg--gainsboro rounded--6 pa--1">
8
<kbd>.column--3</kbd>
9
</div>
10
<div class="column--4 bg--gainsboro rounded--6 pa--1">
11
<kbd>.column--4</kbd>
12
</div>
13
<div class="column--5 bg--gainsboro rounded--6 pa--1">
14
<kbd>.column--5</kbd>
15
</div>
16
<div class="column--6 bg--gainsboro rounded--6 pa--1">
17
<kbd>.column--6</kbd>
18
</div>
19
<div class="column--7 bg--gainsboro rounded--6 pa--1">
20
<kbd>.column--7</kbd>
21
</div>
22
<div class="column--8 bg--gainsboro rounded--6 pa--1">
23
<kbd>.column--8</kbd>
24
</div>
25
<div class="column--9 bg--gainsboro rounded--6 pa--1">
26
<kbd>.column--9</kbd>
27
</div>
28
<div class="column--10 bg--gainsboro rounded--6 pa--1">
29
<kbd>.column--10</kbd>
30
</div>
31
<div class="column--11 bg--gainsboro rounded--6 pa--1">
32
<kbd>.column--11</kbd>
33
</div>
34
<div class="column--12 bg--gainsboro rounded--6 pa--1">
35
<kbd>.column--12</kbd>
36
</div>
Copied!

Variable

Class
Properties
.column--1
width: 8.33333%
.column--2
width: 16.66667%
.column--3
width: 25%
.column--4
width: 33.33333%
.column--5
width: 41.66667%
.column--6
width: 50%
.column--7
width: 58.33333%
.column--8
width: 66.66667%
.column--9
width: 75%
.column--10
width: 83.33333%
.column--11
width: 91.66667%
.column--12
width: 100%
Last modified 1yr ago
Copy link