column half html

column-half.html

<div class="container">

  <div class="row">
    <div class="column">
      .column
    </div>
  </div>

  <div class="row">
    <div class="column two-thirds">
      .column .two-thirds
    </div>
    <div class="column one-third">
      .column .one-third
    </div>
  </div>

  <div class="row">
    <div class="column one-half">
      .column .one-half
    </div>
    <div class="column one-half">
      .column .one-half
    </div>
  </div>

  <div class="row">
    <div class="column one-third">
      .column .one-third
    </div>
    <div class="column one-third">
      .column .one-third
    </div>
    <div class="column one-third">
      .column .one-third
    </div>
  </div>

  <div class="row">
    <div class="column one-fourth">
      .column .one-fourth
    </div>
    <div class="column one-fourth">
      .column .one-fourth
    </div>
    <div class="column one-fourth">
      .column .one-fourth
    </div>
    <div class="column one-fourth">
      .column .one-fourth
    </div>
  </div>

  <div class="row">
    <div class="column one-sixth">
      .column .one-sixth
    </div>
    <div class="column one-sixth">
      .column .one-sixth
    </div>
    <div class="column one-sixth">
      .column .one-sixth
    </div>
    <div class="column one-sixth">
      .column .one-sixth
    </div>
    <div class="column one-sixth">
      .column .one-sixth
    </div>
    <div class="column one-sixth">
      .column .one-sixth
    </div>
  </div>

</div>