# Columns

{% hint style="info" %}
Since `1.8.0`
{% endhint %}

## Class

```
.columns
```

```css
.column
```

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

## Code Sample

#### .columns

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

```markup
<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}

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