column-N

<div class="grid">
  <div class="row">
    <div class="column-16"></div>
  </div>
  <div class="row">
    <div class="column-1"></div>
    <div class="column-15"></div>
  </div>
  ...
</div>

offset-N

offset-N works only for size range in media queries.

<div class="grid">
  <div class="row">
    <div class="column-12 offset-4"></div>
  </div>
  <div class="row">
    <div class="column-3"></div>
    <div class="column-4 offset-3 column-l-13"></div>
  </div>
  ...
</div>

column-v-N, column-l-N, column-N, column-m-N, column-s-N, column-t-N

• v{ast|ery-large}: max-width: 1280px
• large: max-width: 980px
• (normal): max-width: 768px
• m{iddle|edium}: max-width: 640px
• small: max-width: 480px
• tiny: max-width: 320px

<div class="grid">
  <div class="row">
    <div class="column-4 column-v-8 column-m-16"></div>
    <div class="column-4 column-v-8 column-m-16"></div>
    <div class="column-4 column-v-8 column-m-16"></div>
    <div class="column-4 column-v-8 column-m-16"></div>
  </div>
  <div class="row">
    <div class="column-8 column-s-16"></div>
    <div class="column-8 column-s-16"></div>
    <div class="column-8 column-s-16"></div>
    <div class="column-8 column-s-16"></div>
  </div>
  <div class="row">
    <div class="column-16 column-n-8"></div>
    <div class="column-16 column-n-8"></div>
  </div>
  <div class="row">
    <div class="column-8 column-s-16"></div>
    <div class="column-8 column-s-16"></div>
  </div>
  ...
</div>