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

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

L-Container

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

Steady Grid

Standard Grid

The Grid consists of children that are separated by a gap (gutter: 20px) and have a steady / uniform width.

1/2
1/2
1/2
1/3
1/3
1/3
1/3
1/3
1/4
1/4
1/4
1/4
1/4
1/4
1/4

Vertical space

None: l-steadygrid-nogap

1/2
1/2
1/2

Small: l-steadygrid-smallgap

1/2
1/2
1/2

Large: l-steadygrid-largegap

1/2
1/2
1/2

No Gutter

l-steadygrid-nogutter

1/4
1/4
1/4
1/4
1/4
1/4
1/4

Alignment

Only left alignment is possible.

Understanding Device Breakpoints

  • Empty = Desktop
  • tablet (Landscape)
  • tablet-portrait
  • mobile (Landscape)
  • mobile-portrait
Dektop: 1/4
Tablet: 1/3
Mobile: 1/2
Mobile Portrait: 1/1
Dektop: 1/4
Tablet: 1/3
Mobile: 1/2
Mobile Portrait: 1/1
Dektop: 1/4
Tablet: 1/3
Mobile: 1/2
Mobile Portrait: 1/1
Dektop: 1/4
Tablet: 1/3
Mobile: 1/2
Mobile Portrait: 1/1

Dynamic content

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
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