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%