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

Default

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

12
11
1
10
2
9
3
8
4
7
5
6
6
5
4
3
4
4
4
3
3
3
3
2
2
2
2
2
2
1
1
1
1
1
1
1
1
1
1
1
1

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

4, 6, 12
4, 6, 12
4, 6, 12
4, 6, 12
9, 2, 12
2, 5, 12
1, 5, 12
4, 6, 12
6, 12, 12
2, 12, 12
2, 12, 12

			
				<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

6, offset 6
6
6, offset 6
6, offset 3
3
3, offset 3
3, offset 3
3
9

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

12
11
1
10
2
9
3
8
4
7
5
6
6
5
4
3
4
4
4
3
3
3
3
2
2
2
2
2
2
1
1
1
1
1
1
1
1
1
1
1
1

			
				<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

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

  • 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