{% include partials/section_header.html content="Grid" id="grid" %}

<div class="small-section grid">
  <div class="row">
    <div class="column">
      <div class="content"></div>
    </div>
    <div class="column">
      <div class="content"></div>
    </div>
    <div class="column">
      <div class="content"></div>
    </div>
    <div class="column">
      <div class="content"></div>
    </div>
    <div class="column">
      <div class="content"></div>
    </div>
  </div>
  <div class="row">
    <div class="xlarge-11 large-1 medium-3 small-4 xsmall-12 columns">
      <div class="content"></div>
    </div>
    <div class="xlarge-1 large-11 medium-3 small-4 xsmall-12 columns">
      <div class="content"></div>
    </div>
    <div class="xlarge-10 large-2 medium-3 small-4 xsmall-12 columns">
      <div class="content"></div>
    </div>
    <div class="xlarge-2 large-10 medium-3 small-4 xsmall-12 columns">
      <div class="content"></div>
    </div>
    <div class="xlarge-9 large-3 medium-3 small-4 xsmall-12 columns">
      <div class="content"></div>
    </div>
    <div class="xlarge-3 large-9 medium-3 small-4 xsmall-12 columns">
      <div class="content"></div>
    </div>
    <div class="xlarge-8 large-4 medium-3 small-4 xsmall-12 columns">
      <div class="content"></div>
    </div>
    <div class="xlarge-4 large-8 medium-3 small-4 xsmall-12 columns">
      <div class="content"></div>
    </div>
    <div class="xlarge-7 large-5 medium-3 small-4 xsmall-12 columns">
      <div class="content"></div>
    </div>
    <div class="xlarge-5 large-7 medium-3 small-4 xsmall-12 columns">
      <div class="content"></div>
    </div>
    <div class="xlarge-6 large-6 medium-3 small-4 xsmall-12 columns">
      <div class="content"></div>
    </div>
    <div class="xlarge-6 large-6 medium-3 small-4 xsmall-12 columns">
      <div class="content"></div>
    </div>
  </div>
</div>

<div class="grid">
  {% include mono/grid/grid_demo_1.html %}
</div>

<div class="small-section grid">
  <div class="row">
    <div class="xsmall-4 columns">
      <div class="content"></div>
    </div>
    <div class="xsmall-4 columns">
      <div class="content"></div>
    </div>
    <div class="xsmall-4 columns small-order-1 medium-order-3 large-order-2">
      <div class="content red"></div>
    </div>
    <div class="xsmall-4 columns small-order-3 medium-order-2 large-order-1">
      <div class="content blue"></div>
    </div>
    <div class="xsmall-4 columns small-order-2 medium-order-1 large-order-3">
      <div class="content green"></div>
    </div>
    <div class="xsmall-4 columns">
      <div class="content"></div>
    </div>
  </div>
</div>

<div class="grid">
  {% include mono/grid/grid_demo_2.html %}
</div>

<div class="small-section grid">
  <div class="row">
    <div class="xsmall-1 xsmall-offset-11 columns">
      <div class="content"></div>
    </div>
    <div class="xsmall-2 xsmall-offset-10 columns">
      <div class="content"></div>
    </div>
    <div class="xsmall-3 xsmall-offset-9 columns">
      <div class="content"></div>
    </div>
    <div class="xsmall-4 xsmall-offset-8 columns">
      <div class="content"></div>
    </div>
    <div class="xsmall-5 xsmall-offset-7 columns">
      <div class="content"></div>
    </div>
    <div class="xsmall-6 xsmall-offset-6 columns">
      <div class="content"></div>
    </div>
    <div class="xsmall-7 xsmall-offset-5 columns">
      <div class="content"></div>
    </div>
    <div class="xsmall-8 xsmall-offset-4 columns">
      <div class="content"></div>
    </div>
    <div class="xsmall-9 xsmall-offset-3 columns">
      <div class="content"></div>
    </div>
    <div class="xsmall-10 xsmall-offset-2 columns">
      <div class="content"></div>
    </div>
    <div class="xsmall-11 xsmall-offset-1 columns">
      <div class="content"></div>
    </div>
    <div class="column">
      <div class="content"></div>
    </div>
  </div>
</div>

<div class="grid">
  {% include mono/grid/grid_demo_3.html %}
</div>

<div class="fullscreen gray grid">
  <div class="row">
    <div class="xsmall-3 columns">
      <div class="content"></div>
    </div>
    <div class="xsmall-9 columns">
      <div class="content"></div>
    </div>
    <div class="xsmall-7 columns">
      <div class="content"></div>
    </div>
    <div class="xsmall-5 columns">
      <div class="content"></div>
    </div>
    <div class="xsmall-2 columns">
      <div class="content"></div>
    </div>
    <div class="xsmall-10 columns">
      <div class="content"></div>
    </div>
  </div>
</div>

<div class="grid">
  {% include mono/grid/grid_demo_4.html %}
</div>