Grids offset

Offset columns by any column number to control the space between

.col col-offset-n

Automatic columns can be easily spaced using column specific offset classes (eg. col-offset-3)

1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
1
2
3
4
1
1
1
1
2
<div class="row">
    <div class="col">
        <div class="box">1</div>
    </div>
    <div class="col">
        <div class="box">2</div>
    </div>
    <div class="col">
        <div class="box">3</div>
    </div>
    <div class="col">
        <div class="box">4</div>
    </div>
    <div class="col">
        <div class="box">5</div>
    </div>
    <div class="col">
        <div class="box">6</div>
    </div>
    <div class="col">
        <div class="box">7</div>
    </div>
    <div class="col">
        <div class="box">8</div>
    </div>
    <div class="col">
        <div class="box">9</div>
    </div>
    <div class="col">
        <div class="box">10</div>
    </div>
    <div class="col">
        <div class="box">11</div>
    </div>
    <div class="col">
        <div class="box">12</div>
    </div>
</div>

<div class="row">
    <div class="col col-offset-2">
        <div class="box">1</div>
    </div>
    <div class="col col-offset-2">
        <div class="box">2</div>
    </div>
    <div class="col col-offset-2">
        <div class="box">3</div>
    </div>
    <div class="col col-offset-2">
        <div class="box">4</div>
    </div>
</div>

<div class="row">
    <div class="col col-offset-1">
        <div class="box">1</div>
    </div>
    <div class="col col-offset-1">
        <div class="box">2</div>
    </div>
    <div class="col col-offset-1">
        <div class="box">3</div>
    </div>
    <div class="col col-offset-1">
        <div class="box">4</div>
    </div>
</div>

<div class="row">
    <div class="col col-offset-9">
        <div class="box">1</div>
    </div>
</div>

<div class="row">
    <div class="col col-offset-6">
        <div class="box">1</div>
    </div>
</div>

<div class="row">
    <div class="col col-offset-3">
        <div class="box">1</div>
    </div>
</div>

<div class="row">
    <div class="col col-offset-6">
        <div class="box">1</div>
    </div>
    <div class="col">
        <div class="box">2</div>
    </div>
</div>

.row _ungap > .col col-offset-n

Automatic columns in a row without gutters, spaced using offset classes

1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
1
2
3
4
1
1
1
1
2
<div class="row _ungap">
    <div class="col">
        <div class="box">1</div>
    </div>
    <div class="col">
        <div class="box">2</div>
    </div>
    <div class="col">
        <div class="box">3</div>
    </div>
    <div class="col">
        <div class="box">4</div>
    </div>
    <div class="col">
        <div class="box">5</div>
    </div>
    <div class="col">
        <div class="box">6</div>
    </div>
    <div class="col">
        <div class="box">7</div>
    </div>
    <div class="col">
        <div class="box">8</div>
    </div>
    <div class="col">
        <div class="box">9</div>
    </div>
    <div class="col">
        <div class="box">10</div>
    </div>
    <div class="col">
        <div class="box">11</div>
    </div>
    <div class="col">
        <div class="box">12</div>
    </div>
</div>

<div class="row _ungap">
    <div class="col col-offset-2">
        <div class="box">1</div>
    </div>
    <div class="col col-offset-2">
        <div class="box">2</div>
    </div>
    <div class="col col-offset-2">
        <div class="box">3</div>
    </div>
    <div class="col col-offset-2">
        <div class="box">4</div>
    </div>
</div>

<div class="row _ungap">
    <div class="col col-offset-1">
        <div class="box">1</div>
    </div>
    <div class="col col-offset-1">
        <div class="box">2</div>
    </div>
    <div class="col col-offset-1">
        <div class="box">3</div>
    </div>
    <div class="col col-offset-1">
        <div class="box">4</div>
    </div>
</div>

<div class="row _ungap">
    <div class="col col-offset-9">
        <div class="box">1</div>
    </div>
</div>

<div class="row _ungap">
    <div class="col col-offset-6">
        <div class="box">1</div>
    </div>
</div>

<div class="row _ungap">
    <div class="col col-offset-3">
        <div class="box">1</div>
    </div>
</div>

<div class="row _ungap">
    <div class="col col-offset-6">
        <div class="box">1</div>
    </div>
    <div class="col">
        <div class="box">2</div>
    </div>
</div>

.row _ungap > .col-n col-offset-n (requires ._start on row for proper alignment)

For columns of a specified percentual width (eg. col-3) it is preferable to use a combination of grid-distribution setting (eg. _start) and _ungap to control the space between columns

1
2
3
4
5
6
1
2
3
1
2
3
1
2
1
2
1
2
1
2
1
2
1
2

<div class="row _start  _ungap">
    <div class="col-1">
        <div class="box">1</div>
    </div>
    <div class="col-1 col-offset-1">
        <div class="box">2</div>
    </div>
    <div class="col-1 col-offset-1">
        <div class="box">3</div>
    </div>
    <div class="col-1 col-offset-1">
        <div class="box">4</div>
    </div>
    <div class="col-1 col-offset-1">
        <div class="box">5</div>
    </div>
    <div class="col-1 col-offset-1">
        <div class="box">6</div>
    </div>
</div>

<div class="row _start  _ungap">
    <div class="col-2">
        <div class="box">1</div>
    </div>
    <div class="col-2 col-offset-2">
        <div class="box">2</div>
    </div>
    <div class="col-2 col-offset-2">
        <div class="box">3</div>
    </div>
</div>

<div class="row _start  _ungap">
    <div class="col-3">
        <div class="box">1</div>
    </div>
    <div class="col-3 col-offset-1">
        <div class="box">2</div>
    </div>
    <div class="col-3 col-offset-1">
        <div class="box">3</div>
    </div>
</div>

<div class="row _start  _ungap">
    <div class="col-10">
        <div class="box">1</div>
    </div>
    <div class="col-1 col-offset-1">
        <div class="box">2</div>
    </div>
</div>

<div class="row _start  _ungap">
    <div class="col-9">
        <div class="box">1</div>
    </div>
    <div class="col-1 col-offset-2">
        <div class="box">2</div>
    </div>
</div>

<div class="row _start  _ungap">
    <div class="col-8">
        <div class="box">1</div>
    </div>
    <div class="col-1 col-offset-3">
        <div class="box">2</div>
    </div>
</div>

<div class="row _start  _ungap">
    <div class="col-7">
        <div class="box">1</div>
    </div>
    <div class="col-1 col-offset-4">
        <div class="box">2</div>
    </div>
</div>

<div class="row _start  _ungap">
    <div class="col-6">
        <div class="box">1</div>
    </div>
    <div class="col-1 col-offset-5">
        <div class="box">2</div>
    </div>
</div>

<div class="row _start  _ungap">
    <div class="col-5">
        <div class="box">1</div>
    </div>
    <div class="col-1 col-offset-6">
        <div class="box">2</div>
    </div>
</div>