Layout
Equal Width List
- Incidunt excepturi cumque error ab alias autem accusantium praesentium sed
- Voluptas iusto totam et
- Rem quia eos aut fugit ducimus
- Rerum nihil accusantium omnis nihil et
- Et in ad omnis totam aut incidunt
- Ullam hic voluptatem et
- Nisi sed natus praesentium et exercitationem aliquid earum suscipit
- Est quia odit laboriosam nam quis dolores officiis sapiente eos ipsum voluptates ab enim accusantium
- Occaecati quis nulla cumque quia consequatur
- Velit ut laborum alias
- Iure vel deserunt rerum laboriosam sit ea iusto rerum iure id quidem praesentium
- Numquam iure perferendis iusto
- Incidunt excepturi cumque error ab alias autem accusantium praesentium sed
- Voluptas iusto totam et
L-Detailpage Background
L-Masonry
L-Masonry
L-Page Grid
L-Page Grid
Layout Grid
The Grid consists/children that are separated by a constant gutter.
Standard Grid
The Grid consists/column children that are separated by a gap. (The «l-gap» class add a gutter margin to its children when applied to the «l-grid» 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
1/6
1/6
1/6
1/6
1/6
1/6
1/7
1/7
1/7
1/7
1/7
1/7
1/7
Vertical space
None: l-grid-nogap
1/1
1/2
1/2
Small: l-grid-smallgap
1/1
1/2
1/2
Large: l-grid-largegap
1/1
1/2
1/2
Alignment
Default: left
1/1
1/2
1/2
Center: l-grid-center
1/1
1/2
1/2
Right: l-grid-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-grid-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
Left-Right
Left Right (with floats)
Left
Right
Rem quia eos aut fugit ducimus
Rerum nihil accusantium omnis nihil et
Et in ad omnis totam aut incidunt
Ullam hic voluptatem et
Left Right Table, with Mobile Portrait Reset
Has vertical alignment
Left
Right
Nisi sed natus praesentium et exercitationem aliquid earum suscipit
Est quia odit laboriosam nam quis dolores officiis sapiente eos ipsum voluptates ab enim accusantium