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

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

Standard, the grid is created without spacing.
To add spacing to the grid, add the modifier l-grid--with-margins.
It will use the amount defined in the gutter variabele to add the correct amount of spacing.

{% endset %}

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

<div class="l-grid l-grid--with-margins">
  <div class="l-grid__col-12-12">12</div>

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

  <div class="l-grid__col-10-12">10</div>
  <div class="l-grid__col-2-12">2</div>

  <div class="l-grid__col-9-12">9</div>
  <div class="l-grid__col-3-12">3</div>

  <div class="l-grid__col-8-12">8</div>
  <div class="l-grid__col-4-12">4</div>

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

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

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

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

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

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

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

{% endset %}