Styleguide Navigation

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

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
Rem quia eos aut fugit ducimus