Grid
Desktop grid
1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
3
3
3
3
4
4
4
6
6
7
5
8
4
9
3
10
2
11
1
12
Tablet grid
1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
3
3
3
3
4
4
4
6
6
7
5
8
4
9
3
10
2
11
1
12
Mobile grid
1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
3
3
3
3
4
4
4
6
6
7
5
8
4
9
3
10
2
11
1
12
Grid s borderem
Modifikátor .grid--bd odstraní mezery mezi sloupci a přidá ohraničení 1 px širokým borderem.
3
3
3
3
Grid bez odsazení
Modifikátor .grid--0 odstraní mezery mezi sloupci.
3
3
3
3
Grid s různým odsazení
Pro různé šířky mezer mezi sloupci lze použít modifikátory (číslo udává šířku v px):
- .grid--10
- .grid--40
- .grid--50
- .grid--60
- .grid--80
10 px
3
3
3
3
40 px
3
3
3
3
50 px
3
3
3
3
60 px
3
3
3
3
80 px
3
3
3
3
Layout používá 12 sloupcový grid.
Základní definice řádku je div.grid a sloupce div.grid__cell.
Šířka sloupce se definuje pomocí tříd .size--{sirka}-12 (aplikováno od 1280 px) nebo .size--{breakpoint}-{sirka}-12.
{sirka}- nabývá hodnot 1 až 12 a říká kolik dílů z 12 sloupec zabírá.
{breakpoint} - nabývá hodnot: