Grids Tests
Base Grid
1
1/2
1/2
1/4
1/4
1/4
1/4
3/4
1/4
1/3
1/3
1/3
1/3
2/3
1/5
2/5
2/5
3/5
2/5
1/6
1/6
1/6
1/6
1/6
1/6
1/6
5/6
1/8
3/8
3/8
1/8
3/8
5/8
7/8
1/8
1/4
2/4
1/4
1/8
4/8
1/8
2/8
1/12
5/12
1/12
5/12
7/12
5/12
1/12
11/12
Responsive Grid
palm-wide-1/2 lap-1/4 lap-wide-3/4 desk-one-third
palm-wide-1/2 lap-1/4 lap-wide-2/12 desk-one-third
palm-wide-1/3 lap-1/4 lap-wide-1/12 desk-one-sixth
palm-wide-2/3 lap-1/4 lap-wide-1/12 desk-one-sixth
Responsive Grid - hidden field
palm-wide-1/2 lap-1/4 lap-wide-only--visuallyhidden desk-one-third
palm-wide-1/2 lap-1/4 lap-wide--visuallyhidden
palm-to-lap--visuallyhidden lap-wide-1/12 desk-one-sixth
palm-to-palm-wide--visuallyhidden lap-1/4 lap-wide-1/12 desk-one-sixth
Images Grid
Nested Grids
Nested 1/2
Nested 1/2
r1/4
r1/4
r1/4
r1/4
Custom Font and Grids
Grids with a serif font stack.
Nested 1/2
Nested 1/2
r1/4
r1/4
r1/4
r1/4
Grids with a monospace font stack.
Nested 1/2
Nested 1/2
r1/4
r1/4
r1/4
r1/4
Wrapping Grids
Wrapping 1/2
Wrapping 1/2
Wrapping 1/3
Reversed grid
1
2
3
4
5
6
7
Full grid
1
2
3
4
5
6
7
Centered grid
1
2
3
4
5
6
7