Offset columns by any column number to control the space between
Automatic columns can be easily spaced using column specific offset classes (eg. col-offset-3)
<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>
Automatic columns in a row without gutters, spaced using offset classes
<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>
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
<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>