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 as a modifier. For example: l-grid__col--6, l-grid__col--4, ...

IMPORTANT TO NOTE: All these modifiers below can be combined with responsive suffixes, except for the l-grid--with-spacing modifier.

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

Responsive

Responsive suffixes can be applied to the grid to make it entirely customizable and manageable. The l-grid__col classes are defined with the breakpoint they are supposed to change at. For example:

  • l-grid__col-8@viewport-12: is 8 column width above the screen breakpoint
  • l-grid__col-6@viewport-9: is 6 column width above the desktop breakpoint
  • l-grid__col-3@viewport-7: is 3 column width above the tablet breakpoint
  • l-grid__col-2@viewport-4: is 2 column width above the mobile breakpoint

Not only the col itself can be adjusted with breakpoints, the offsets and other modifiers as wel.

px 

			
				<div class="l-grid l-grid--with-spacing">
	<div class="l-grid__col l-grid__col--4@viewport-9 l-grid__col--6@viewport-7"><span>4, 6, 12</span></div>
	<div class="l-grid__col l-grid__col--4@viewport-9 l-grid__col--6@viewport-7"><span>4, 6, 12</span></div>
	<div class="l-grid__col l-grid__col--4@viewport-9 l-grid__col--6@viewport-7"><span>4, 6, 12</span></div>
	<div class="l-grid__col l-grid__col--4@viewport-9 l-grid__col--6@viewport-7"><span>4, 6, 12</span></div>
	<div class="l-grid__col l-grid__col--9@viewport-9 l-grid__col--2@viewport-7"><span>9, 2, 12</span></div>
	<div class="l-grid__col l-grid__col--2@viewport-9 l-grid__col--5@viewport-7"><span>2, 5, 12</span></div>
	<div class="l-grid__col l-grid__col--1@viewport-9 l-grid__col--5@viewport-7"><span>1, 5, 12</span></div>
	<div class="l-grid__col l-grid__col--4@viewport-9 l-grid__col--6@viewport-7"><span>4, 6, 12</span></div>
	<div class="l-grid__col l-grid__col--6@viewport-7"><span>6, 12, 12</span></div>
	<div class="l-grid__col l-grid__col--2@viewport-9 l-grid__col--12@viewport-7"><span>2, 12, 12</span></div>
	<div class="l-grid__col l-grid__col--6@viewport-9 l-grid__col--3@viewport-7 l-grid__col--offset-3@viewport-9 l-grid__col--offset-6@viewport-7"><span>2, 12, 12</span></div>
</div>

With offset

When there are empty spaces within the grid, the layout can be manipulated by applying an offset to the column. The offset generates a margin to the left, based on the width of the column defined within the offset: l-grid__col--offset-6.

This can be combined with l-grid--with-spacing to create spacing between each items and their offset

px 

			
				<div class="l-grid l-grid--with-spacing">
	<div class="l-grid__col l-grid__col--6 l-grid__col--offset-6"><span>6, offset 6</span></div>
	<div class="l-grid__col l-grid__col--6"><span>6</span></div>
	<div class="l-grid__col l-grid__col--6 l-grid__col--offset-6"><span>6, offset 6</span></div>
	<div class="l-grid__col l-grid__col--6 l-grid__col--offset-3"><span>6, offset 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 l-grid__col--offset-3"><span>3, offset 3</span></div>
	<div class="l-grid__col l-grid__col--3 l-grid__col--offset-3"><span>3, offset 3</span></div>
	<div class="l-grid__col l-grid__col--3"><span>3</span></div>
	<div class="l-grid__col l-grid__col--9"><span>9</span></div>
</div>

With spacing

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

px 

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

Documentation

Modifiers

  • l-grid--with-spacing

    Create the same grid as the default, but with spacing between its child columns

  • l-grid__col--1, l-grid__col--2, l-grid__col--3, ... --12

    Create a column that has a certain width, starting from 1 up until 12. The width is calculated by dividing the column by 12. So l-grid__col--6's width is equal to 12 / 6, which is 50%.

  • l-grid__col--offset-1, l-grid__col--offset-2, l-grid__col--offset-3, ... -12

    Create an offset on that column, where a margin-left pushes to column to the right based on the with passed in the modifier. The margin-left is calculated by diving the column by 12. So l-grid__col--6's margin-left is equal to 12 / 6, which is 50%.

  • l-grid--align-start

    Align the columns in the grid to the left

  • l-grid--align-center

    Align the columns in the grid to the center

  • l-grid--align-end

    align the columns in the grid to the right

  • l-grid--align-top

    Align the columns in the grid vertically to the top. If one column is longer in height, the smaller one will the placed on the top of the row.

  • l-grid--align-middle

    Align the columns in the grid vertically to the middle. If one column is longer in height, the smaller one will the placed on the middle of the row.

  • l-grid--align-bottom

    Align the columns in the grid vertically to the bottom. If one column is longer in height, the smaller one will the placed on the bottom of the row.

  • l-grid--stretch

    Stretch all the columns to make sure they are the same height

  • l-grid--space-between

    Create the equal space between each column

  • l-grid--space-around

    Create the equal space around each column

  • l-grid__col--align-top

    Align the column vertically to the top

  • l-grid__col--align-middle

    Align the column vertically to the middle

  • l-grid__col--align-bottom

    Align the column vertically to the bottom

  • l-grid__col--stretch

    Stretch the column to be the same height as the rest if the rest is longer in height

  • l-grid__col--first

    Change the position of the column to be the first column in a row

  • l-grid__col--last

    Change the position of the column to be last in a row

  • l-grid__col--auto

    Do not specify a width, make the content fill up the available space

  • l-grid__col--grow

    Make the column take up the entire remaining space

  • l-grid--reverse

    Reverse the position of the columns within the grid