System & logics
This sum is a total of 12 columns. Once it exceeds the total amount, the columns are placed on a new row. Try to seperate your content in a logical amount that divisible by 12.
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.
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.
12
3
4
7
5
5
8
1
3
2
12
1
1
2
5
Without spacing
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
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.
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