Flex Grid
The Grid consists/children that are separated by a constant gutter (20px). Try to use SteadyGrid whenever possible.
Standard Grid
The Grid consists/column children that are separated by a gap (gutter: 20px). (The «l-gap» class add a gutter margin to its children when applied to the «l-FlexGrid» class.)
1/1
1/2
1/2
1/3
1/3
1/3
1/3
2/3
1/4
1/4
1/4
1/4
1/4
3/4
1/5
1/5
1/5
1/5
1/5
Vertical Space
None: nogap
1/1
1/2
1/2
Large: gap
1/1
1/2
1/2
Horizontal Space
None: nogutter
1/3
1/3
1/3
1/2
1/2
Large: gutter
1/3
1/3
1/3
1/2
1/2
Alignment
Default: left
1/1
1/2
1/2
Center: center
1/1
1/2
1/2
Right: right
1/1
1/2
1/2
Understanding Device Breakpoints
We've defined a few simple breakpoints, which you can use in conjunction with the layout classes. The define at which point a column should take a different width percentage.
- Empty = Desktop
- Tablet (Landscape)
- Tablet-Portrait
- Mobile (Landscape)
- Mobile-Portrait
1/5
1/4
1/3
1/2
1/1
1/5
1/4
1/3
1/2
1/1
1/5
1/4
1/3
1/2
1/1
1/5
1/4
1/3
1/2
1/1
1/5
1/1
2/3
1/1