The Gutters

13 Mar 2018 in: Grid System

In order to create space between your columns, you will need to add gutters. As you might have guessed by the straight-forwardedness of wojo's grid class names so far, the class to use in this case is .gutters. Just add the class to your .column-group block and you're set.

Keeping up with wojo's grid flexibility, if you don't like default wide gutters, then just use .half-gutters or .quarter-gutters, instead, to halve that space. Also, if don't need the bottom space created by the .gutters class to separate the blocks, you can use .horizontal-gutters, .half-horizontal-gutters or .double-horizontal-gutters for horizontal spacing only.

Available Classes:

half-gutters gutters double-gutters

half-horizontal-gutters horizontal-gutters double-horizontal-gutters

half-vertical-gutters vertical-gutters double-vertical-gutters

<div class="row double-gutters">
  <div class="columns">...</div>
  <div class="columns">...</div>
</div>

as of v.5.5 gutter chnages:

small gutters gutters big gutters

small horizontal gutters horizontal gutters big horizontal gutters

small vertical gutters vertical gutters big vertical gutters

<div class="row big gutters">
  <div class="columns">...</div>
  <div class="columns">...</div>
</div>

Double Gutters

50%