One Column


<div>
-- Your content --
</div>

Two Column


<div class="columns">
  <div class="column">
  -- content in column one
  </div><!-- /column -->
  <div class="column">
  -- content in column two
  </div><!-- /column -->
</div><!-- /columns -->

Two Column with gap


<div class="columns gap">
  <div class="column">
  -- content in column one
  </div><!-- /column -->
  <div class="column">
  -- content in column two
  </div><!-- /column -->
</div><!-- /columns -->

Three Column


<div class="columns">
  <div class="column">
  -- content in column one
  </div><!-- /column -->
  <div class="column">
  -- content in column two
  </div><!-- /column -->
  <div class="column">
  -- content in column three
  </div><!-- /column -->
</div><!-- /columns -->

Three Column with gap


<div class="columns gap">
  <div class="column">
  -- content in column one
  </div><!-- /column -->
  <div class="column">
  -- content in column two
  </div><!-- /column -->
  <div class="column">
  -- content in column three
  </div><!-- /column -->
</div><!-- /columns -->

Four Column


<div class="columns">
  <div class="column">
  -- content in column one
  </div><!-- /column -->
  <div class="column">
  -- content in column two
  </div><!-- /column -->
  <div class="column">
  -- content in column three
  </div><!-- /column -->
  <div class="column">
  -- content in column four
  </div><!-- /column -->
</div><!-- /columns -->

Four Column with gap


<div class="columns gap">
  <div class="column">
  -- content in column one
  </div><!-- /column -->
  <div class="column">
  -- content in column two
  </div><!-- /column -->
  <div class="column">
  -- content in column three
  </div><!-- /column -->
  <div class="column">
  -- content in column four
  </div><!-- /column -->
</div><!-- /columns -->