SOURCE

<div class="row">
  <div class="medium-4 columns" style="background-color:yellow;">
    <p>
      33%
    </p>
  </div>
  <div class="medium-4 columns" style="background-color:pink;">
    <p>
      33%
    </p>
  </div>
  <div class="medium-4 columns" style="background-color:yellow;">
    <p>
      33%
    </p>
  </div>
</div>
<br>
<br>
<br>
<div class="row">
  <div class="medium-3 columns" style="background-color:yellow;">
    <p>
      25%
    </p>
  </div>
  <div class="medium-6 columns" style="background-color:pink;">
    <p>
      .50%
    </p>
  </div>
  <div class="medium-3 columns" style="background-color:yellow;">
    <p>
      .25%-3
    </p>
  </div>
</div>
<br>
<br>
<br>
<div class="row">
  <div class="small-6 columns" style="background-color:yellow;">
    <p>
      .50%
    </p>
  </div>
  <div class="small-6 columns" style="background-color:pink;">
    <p>
      50%
    </p>
  </div>
</div>
<br>
<br>
<div class="row">
  <div class="small-8 columns" style="background-color:yellow;">
    <p>
      .33%
    </p>
  </div>
  <div class="small-4 columns" style="background-color:pink;">
    <p>
      66%
    </p>
  </div>
</div>
<br>
<br>
<div class="row">
<div class="small-4 small-8-push columns" style="background-color:yellow;">
  <p>
    .small-4 .small-8-push
  </p>
</div>
<div class="small-8 small-4-pull columns" style="background-color:pink;">
  <p>
    .small-8 .small-4-pull
  </p>
</div>
</div>
<br>
<div class="small-8 columns" style="background-color:yellow;">.small-8
    <div class="row">
      <div class="small-8 columns" style="background-color:lightcyan;">.small-8 Nested
        <div class="row">
          <div class="small-8 columns" style="background-color:lightblue;">.small-8 Nested Again</div>
          <div class="small-4 columns" style="background-color:lightgreen;">.small-4</div>
        </div>
      </div>
      <div class="small-4 columns" style="background-color:lightgray;">.small-4</div>
    </div>
  </div>
  <div class="small-4 columns" style="background-color:pink;">.small-4</div>
<br>
<br><br>
<div class="medium-6 large-8 columns" style="background-color:red;">.medium-6 .large-8</div>
  <div class="medium-6 large-4 columns" style="background-color:yellow;">.medium-6 .large-4</div>
</div>
<div class="row">
  <div class="small-4 medium-3 large-7 columns" style="background-color:pink;">.small-4 .medium-3 .large-7</div>
  <div class="small-4 medium-6 large-3 columns" style="background-color:lightgreen;">.small-4 .medium-6 .large-3</div>
  <div class="small-4 medium-3 large-2 columns" style="background-color:orange;">.small-4 .medium-3 .large-2</div>
</div>
<br><br>
 <div class="small-4 small-centered columns" style="background-color:yellow;">small-4 small-centered</div>
</div>
<div class="row">
  <div class="small-6 small-centered columns" style="background-color:pink;">small-6 small-centered</div>
</div>
<div class="row">
  <div class="small-6 large-centered columns" style="background-color:lightgreen;">small-6 large-centered</div>
</div>
<div class="row">
  <div class="small-8 small-centered large-uncentered columns" style="background-color:yellow;">small-8 small-centered large-uncentered</div>
</div>
<div class="row">
  <div class="small-10 small-centered columns" style="background-color:pink;">small-10 small-centered</div>
</div>