Component > grid

Grid spacing

Break points

grid with marges

Grid without parents have margin by default identical to the design grid.
This margins are not applied in nested grid.
The default grid have 4 cols in mobile resolution, 6 in tablet and 12 in desktop and wide-desktop.

1 1/12

1 1/4

1 1/6

2 1/12

2 1/4

2 1/6

3 1/12

3 1/4

3 1/6

4 1/12

4 1/4

4 1/6

5 1/12

5 1/4

5 1/6

6 1/12

6 1/4

6 1/6

7 1/12

7 1/4

7 1/6

8 1/12

8 1/4

8 1/6

9 1/12

9 1/4

9 1/6

10 1/12

10 1/4

10 1/6

11 1/12

11 1/4

11 1/6

12 1/12

12 1/4

12 1/6

1 1/1 for all resolution

2 1/2 generic 1/1 mobile

2 1/2 generic1/1 mobile

3 1/4 1/2 tablet 1/1 mobile

4 1/4 1/2 tablet 1/1 mobile

5 1/3 1/2 tablet 1/1 mobile

6 1/3 1/2 tablet 1/1 mobile

it can be nested.

Nested

Offset

Nested

box alignment and modifiers

flxstart

flxcenter

flxend

flxtop

big bloc

flxtop : aligned on top

flxmiddle

big bloc

flxmiddle : aligned on middle

flxbottom

big bloc

flxbottom : aligned on bottom

flxaround

3 boxes col-3...

...aligned...

...in a bloc

flxbetween

3 boxes col-3...

...on each extrem sides...

..and middle of the bloc

Reversed grid

(real order of the blocs: 1 2 3 4 )

Responsive size of and offset (in pourcent and in /4, /6 and /12)

col	col-xs	col-sm	col-md	col-lg
col-1	col-xs-1	col-sm-1	col-md-1	col-lg-1
1/12 (8.33333333%), 1/6 (16.666666667%), 1/4 (25%)	1/4 (25%)	1/6 (16.666666667%)	1/12 (8.33333333%)	1/12 (8.33333333%)
col-2	col-xs-2	col-sm-2	col-md-2	col-lg-2
2/12 (16.666666667%), 1/6 (25%), 1/4 (25%)	1/4 (25%)	1/6 (16.666666667%)	1/12 (8.33333333%)	1/12 (8.33333333%)
col-3	col-xs-3	col-sm-3	col-md-3	col-lg-3
3/12 (25%), 2,5/6 (25%), 1/4 (25%)	1/4 (25%)	2,5/6 (25%)	3/12 (25%)	3/12 (25%)
col-4	col-xs-4	col-sm-4	col-md-4	col-lg-4
4/12 (33.33333333%), 2/6 (33.333333333%), 2/4 (50%)	2/4 (50%)	2/6 (33.333333333%)	4/12 (33.33333333%)	4/12 (33.33333333%)
col-5	col-xs-5	col-sm-5	col-md-5	col-lg-5
5/12 (41.66666667%), 3/6 (50%), 2/4 (50%)	2/4 (50%)	3/6 (50%)	5/12 (41.66666667%)	5/12 (41.66666667%)
col-6	col-xs-6	col-sm-6	col-md-6	col-lg-6
6/12 (50%), 3/6 (50%), 2/4 (50%)	2/4 (50%)	2/6 (50%)	6/12 (50%)	6/12 (50%)
col-7	col-xs-7	col-sm-7	col-md-7	col-lg-7
7/12 (58.33333333%), 4/6 (66.666666667%), 3/4 (75%)	3/4 (75%)	4/6 (66.666666667%)	7/12 (58.33333333%)	7/12 (58.33333333%)
col-8	col-xs-8	col-sm-8	col-md-8	col-lg-8
8/12 (66.66666667%), 4/6 (66.666666667%), 3/4 (75%)	3/4 (75%)	4/6 (66.666666667%)	8/12 (66.66666667%)	8/12 (66.66666667%)
col-9	col-xs-9	col-sm-9	col-md-9	col-lg-9
9/12 (75%), 5/6 (83.333333334%), 3/4 (75%)	3/4 (75%)	5/6 (83.333333334%)	9/12 (75%)	9/12 (75%)
col-10	col-xs-10	col-sm-10	col-md-10	col-lg-10
10/12 (83.33333333%), 5/6 (83.333333334%), 4/4 (100%)	4/4 (100%)	5/6 (83.333333334%)	10/12 (83.33333333%)	10/12 (83.33333333%)
col-11	col-xs-11	col-sm-11	col-md-11	col-lg-11
11/12 (91.66666667%), 6/6 (100%), 4/4 (100%)	4/4 (100%)	6/6 (100%)	5/12 (91.66666667%)	5/12 (91.66666667%)
col-12	col-xs-4	col-sm-12	col-md-12	col-lg-12
12/12 (100%), 6/6 (100%), 4/4 (100%)	4/4 (100%)	6/6 (100%)	12/12 (100%)	12/12 (100%)