{# ========================================================================= #}
{# :: Settings & variables #}
{# ========================================================================= #}
{% set params = {
  scope: "s-grid"
} %}

{# ========================================================================= #}
{# :: Info #}
{# ========================================================================= #}
{% set info %}

The grid has empty spaces and is irregular. This can be done by placing some
u-gird__col inside another div with the class l-grid__row.

{% endset %}

{# ========================================================================= #}
{# :: Preview #}
{# ========================================================================= #}
{% set preview %}

<div class="l-grid l-grid--with-margins">

  <div class="l-grid__col-12-12"><span>12</span></div>

  <div class="l-grid__row">
    <div class="l-grid__col-3-12"><span>3</span></div>
    <div class="l-grid__col-4-12"><span>4</span></div>
  </div>

  <div class="l-grid__col-7-12"><span>7</span></div>
  <div class="l-grid__col-5-12"><span>5</span></div>

  <div class="l-grid__row">
    <div class="l-grid__col-5-12"><span>5</span></div>
  </div>

  <div class="l-grid__row">
    <div class="l-grid__col-8-12"><span>8</span></div>
    <div class="l-grid__col-1-12"><span>1</span></div>
  </div>

  <div class="l-grid__row">
    <div class="l-grid__col-3-12"><span>3</span></div>
    <div class="l-grid__col-2-12"><span>2</span></div>
  </div>

  <div class="l-grid__col-12-12"><span>12</span></div>

  <div class="l-grid__row">
    <div class="l-grid__col-1-12"><span>1</span></div>
    <div class="l-grid__col-1-12"><span>1</span></div>
  </div>

  <div class="l-grid__row">
    <div class="l-grid__col-2-12"><span>2</span></div>
    <div class="l-grid__col-5-12"><span>5</span></div>
  </div>

</div>

{% endset %}