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>