Flex Grid
The Grid consists/children that are separated by a constant gutter (20px).
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: l-flexgrid-nogap
1/1
1/2
1/2
Small: l-flexgrid-smallgap
1/1
1/2
1/2
Large: l-flexgrid-largegap
1/1
1/2
1/2
Alignment
Default: left
1/1
1/2
1/2
Center: l-flexgrid-center
1/1
1/2
1/2
Right: l-flexgrid-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
No Gutter
l-flexgrid-nogutter
One Whole
One Half
One Half
One Third
One Third
One Third
One Third
Two Thirds
One Quarter
One Quarter
One Quarter
One Quarter
Three Quarters
One Quarter
One Fifth
One Fifth
One Fifth
One Fifth
One Fifth