styleguide

---

Advanced grid work

Everything in foundaiton is rows and columns. There are always 12 columns in a row:

Grids can also behave differently at different sizes (think phone vs. desktop)

<div class="demogrid">
  <div class="row">
    <div class="columns small-2 large-4">small-2 large-4</div>
    <div class="columns small-4 large-4">small-4 large-4</div>
    <div class="columns small-6 large-4">small-6 large-4</div>
  </div>
  <div class="row">
    <div class="columns large-3">large-3</div>
    <div class="columns large-6">large-6</div>
    <div class="columns large-3">large-3</div>
  </div>
  <div class="row">
    <div class="columns small-6 large-2"><!-- ... --></div>
    <div class="columns small-6 large-8"><!-- ... --></div>
    <div class="columns small-12 large-2"><!-- ... --></div>
  </div>
</div>
``` -->