Grid

The grid system is used by applying the class l-grid. In total, no more than 12 columns can fill up the grid. Every child element of the grid is called l-grid__col. The child is properly applied by adding the amount of columns to the child class. An example of a child could be: l-grid__col-4-12, l-grid__col-6-12 or l-grid__col-2-12.

Default

When there are no modifiers applied to the grid, it will render itself as columns and rows.

px 

			
				<div class="l-grid">
	<div class="l-grid__col-12-12"><span>12</span></div>
	<div class="l-grid__col-11-12"><span>11</span></div>
	<div class="l-grid__col-1-12"><span>1</span></div>
	<div class="l-grid__col-10-12"><span>10</span></div>
	<div class="l-grid__col-2-12"><span>2</span></div>
	<div class="l-grid__col-9-12"><span>9</span></div>
	<div class="l-grid__col-3-12"><span>3</span></div>
	<div class="l-grid__col-8-12"><span>8</span></div>
	<div class="l-grid__col-4-12"><span>4</span></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__col-6-12"><span>6</span></div>
	<div class="l-grid__col-6-12"><span>6</span></div>
	<div class="l-grid__col-5-12"><span>5</span></div>
	<div class="l-grid__col-4-12"><span>4</span></div>
	<div class="l-grid__col-3-12"><span>3</span></div>
	<div class="l-grid__col-4-12"><span>4</span></div>
	<div class="l-grid__col-4-12"><span>4</span></div>
	<div class="l-grid__col-4-12"><span>4</span></div>
	<div class="l-grid__col-3-12"><span>3</span></div>
	<div class="l-grid__col-3-12"><span>3</span></div>
	<div class="l-grid__col-3-12"><span>3</span></div>
	<div class="l-grid__col-3-12"><span>3</span></div>
	<div class="l-grid__col-2-12"><span>2</span></div>
	<div class="l-grid__col-2-12"><span>2</span></div>
	<div class="l-grid__col-2-12"><span>2</span></div>
	<div class="l-grid__col-2-12"><span>2</span></div>
	<div class="l-grid__col-2-12"><span>2</span></div>
	<div class="l-grid__col-2-12"><span>2</span></div>
	<div class="l-grid__col-1-12"><span>1</span></div>
	<div class="l-grid__col-1-12"><span>1</span></div>
	<div class="l-grid__col-1-12"><span>1</span></div>
	<div class="l-grid__col-1-12"><span>1</span></div>
	<div class="l-grid__col-1-12"><span>1</span></div>
	<div class="l-grid__col-1-12"><span>1</span></div>
	<div class="l-grid__col-1-12"><span>1</span></div>
	<div class="l-grid__col-1-12"><span>1</span></div>
	<div class="l-grid__col-1-12"><span>1</span></div>
	<div class="l-grid__col-1-12"><span>1</span></div>
	<div class="l-grid__col-1-12"><span>1</span></div>
	<div class="l-grid__col-1-12"><span>1</span></div>
</div>

With empty spaces

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.

px 

			
				<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>

With spacing

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.

px 

			
				<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>

Documentation

Modifiers

  • l-grid--articles

    Used to give the articles more vertical spacing.