Columns

Since 1.8.0
Class
.columns
.column
.column--{1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12}
Code Sample
.columns
<div class="columns">
    <div class="column bg--gainsboro rounded--6 pa--1">
        <kbd>.column</kbd>
    </div>
    <div class="column bg--gainsboro rounded--6 pa--1">
        <kbd>.column</kbd>
    </div>
    <div class="column bg--gainsboro rounded--6 pa--1">
        <kbd>.column</kbd>
    </div>
</div>
.columns--nogap
<div class="columns--nogap">
    <div class="column bg--gainsboro rounded--6 pa--1">
        <kbd>.column</kbd>
    </div>
    <div class="column bg--gainsboro rounded--6 pa--1">
        <kbd>.column</kbd>
    </div>
    <div class="column bg--gainsboro rounded--6 pa--1">
        <kbd>.column</kbd>
    </div>
    <div class="column bg--gainsboro rounded--6 pa--1">
        <kbd>.column</kbd>
    </div>
</div>
.column--{1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12}
<div class="column--1 bg--gainsboro rounded--6 pa--1">
    <kbd>.column--1</kbd>
</div>
<div class="column--2 bg--gainsboro rounded--6 pa--1">
    <kbd>.column--2</kbd>
</div>
<div class="column--3 bg--gainsboro rounded--6 pa--1">
    <kbd>.column--3</kbd>
</div>
<div class="column--4 bg--gainsboro rounded--6 pa--1">
    <kbd>.column--4</kbd>
</div>
<div class="column--5 bg--gainsboro rounded--6 pa--1">
    <kbd>.column--5</kbd>
</div>
<div class="column--6 bg--gainsboro rounded--6 pa--1">
    <kbd>.column--6</kbd>
</div>
<div class="column--7 bg--gainsboro rounded--6 pa--1">
    <kbd>.column--7</kbd>
</div>
<div class="column--8 bg--gainsboro rounded--6 pa--1">
    <kbd>.column--8</kbd>
</div>
<div class="column--9 bg--gainsboro rounded--6 pa--1">
    <kbd>.column--9</kbd>
</div>
<div class="column--10 bg--gainsboro rounded--6 pa--1">
    <kbd>.column--10</kbd>
</div>
<div class="column--11 bg--gainsboro rounded--6 pa--1">
    <kbd>.column--11</kbd>
</div>
<div class="column--12 bg--gainsboro rounded--6 pa--1">
    <kbd>.column--12</kbd>
</div>
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 3yr ago

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%`