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

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

By applying the modifier **l-grid--with-spacing** each column gets based on the
breakpoints defined in the system, spacing around it.

{% endset %}

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

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

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

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

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

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

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

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

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

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

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

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

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

{% endset %}