document:
- title: Overview
  detail: The grid has a maximum of 12 columns, allowing you to create flexible layouts like the following.
  markup: |
    <div class="grid-12 gutter-10">
      <div class="span-6"><span>.span-6</span></div>
      <div class="span-6"><span>.span-6</span></div>
    </div>
    <div class="grid-12 gutter-10">
      <div class="span-4"><span>.span-4</span></div>
      <div class="span-4"><span>.span-4</span></div>
      <div class="span-4"><span>.span-4</span></div>
    </div>
    <div class="grid-12 gutter-10">
      <div class="span-3"><span>.span-3</span></div>
      <div class="span-3"><span>.span-3</span></div>
      <div class="span-3"><span>.span-3</span></div>
      <div class="span-3"><span>.span-3</span></div>
    </div>
- title: Columns
  detail: Direct children of your grid can span multiple columns. n can range from 1 to 12.
  markup: |
    <div class="grid-12 gutter-10">
      <div class="span-6"><span>.span-6</span></div>
      <div class="span-4"><span>.span-4</span></div>
      <div class="span-2"><span>.span-2</span></div>
    </div>
- title: Gutters
  detail: Columns in a grid can be spaced apart using the gutter-n class. Possible values for n are 10 or 20 pixels.
  markup: |
    <div class="grid-12 gutter-20">
      <div class="span-2"><span>.span-2</span></div>
      <div class="span-2"><span>.span-2</span></div>
      <div class="span-2"><span>.span-2</span></div>
      <div class="span-2"><span>.span-2</span></div>
      <div class="span-2"><span>.span-2</span></div>
      <div class="span-2"><span>.span-2</span></div>
    </div>
- title: Nested grids
  detail: For even more flexible layouts, you can nest grids.
  markup: |
    <div class="grid-12 gutter-20">
      <div class="span-2"><span>.span-2</span></div>
      <div class="span-2"><span>.span-2</span></div>
      <div class="span-8">
        <div class="grid-12 gutter-20">
          <div class="span-4"><span>.span-4</span></div>
          <div class="span-4"><span>.span-4</span></div>
          <div class="span-4"><span>.span-4</span></div>
        </div>
      </div>
    </div>
- title: Stacked grid
  detail: The following grid will automatically stack on <b>devices up to mobile</b>.
  markup: |
    <div class="grid-12-vertical gutter-10">
      <div class="span-4"><span>.span-4</span></div>
      <div class="span-4"><span>.span-4</span></div>
      <div class="span-4"><span>.span-4</span></div>
    </div>