Positionierungen innerhalb der Spalten:

Vierspalter - grid-margin-x

one

Duis leo. Maecenas vestibulum mollis diam. Curabitur ullamcorper ultricies nisi. Sed lectus. Donec posuere vulputate arcu.

two

Duis leo. Maecenas vestibulum mollis diam. Curabitur ullamcorper ultricies nisi. Sed lectus. Donec posuere vulputate arcu.

three

Duis leo. Maecenas vestibulum mollis diam. Curabitur ullamcorper ultricies nisi. Sed lectus. Donec posuere vulputate arcu.

four

Duis leo. Maecenas vestibulum mollis diam. Curabitur ullamcorper ultricies nisi. Sed lectus. Donec posuere vulputate arcu.

Vierspalter - grid-padding-x

one

Duis leo. Maecenas vestibulum mollis diam. Curabitur ullamcorper ultricies nisi. Sed lectus. Donec posuere vulputate arcu.

two

Duis leo. Maecenas vestibulum mollis diam. Curabitur ullamcorper ultricies nisi. Sed lectus. Donec posuere vulputate arcu.

three

Duis leo. Maecenas vestibulum mollis diam. Curabitur ullamcorper ultricies nisi. Sed lectus. Donec posuere vulputate arcu.

four

Duis leo. Maecenas vestibulum mollis diam. Curabitur ullamcorper ultricies nisi. Sed lectus. Donec posuere vulputate arcu.

Vierspalter - grid-margin-x grid-padding-x

one

Duis leo. Maecenas vestibulum mollis diam. Curabitur ullamcorper ultricies nisi. Sed lectus. Donec posuere vulputate arcu.

two

Duis leo. Maecenas vestibulum mollis diam. Curabitur ullamcorper ultricies nisi. Sed lectus. Donec posuere vulputate arcu.

three

Duis leo. Maecenas vestibulum mollis diam. Curabitur ullamcorper ultricies nisi. Sed lectus. Donec posuere vulputate arcu.

four

Duis leo. Maecenas vestibulum mollis diam. Curabitur ullamcorper ultricies nisi. Sed lectus. Donec posuere vulputate arcu.

Vierspalter - collapse

one

Duis leo. Maecenas vestibulum mollis diam. Curabitur ullamcorper ultricies nisi. Sed lectus. Donec posuere vulputate arcu.

two

Duis leo. Maecenas vestibulum mollis diam. Curabitur ullamcorper ultricies nisi. Sed lectus. Donec posuere vulputate arcu.

three

Duis leo. Maecenas vestibulum mollis diam. Curabitur ullamcorper ultricies nisi. Sed lectus. Donec posuere vulputate arcu.

four

Duis leo. Maecenas vestibulum mollis diam. Curabitur ullamcorper ultricies nisi. Sed lectus. Donec posuere vulputate arcu.

Vierspalter - grid-margin-x - innercol: padding

one

Duis leo. Maecenas vestibulum mollis diam. Curabitur ullamcorper ultricies nisi. Sed lectus. Donec posuere vulputate arcu.

two

Duis leo. Maecenas vestibulum mollis diam. Curabitur ullamcorper ultricies nisi. Sed lectus. Donec posuere vulputate arcu.

three

Duis leo. Maecenas vestibulum mollis diam. Curabitur ullamcorper ultricies nisi. Sed lectus. Donec posuere vulputate arcu.

four

Duis leo. Maecenas vestibulum mollis diam. Curabitur ullamcorper ultricies nisi. Sed lectus. Donec posuere vulputate arcu.

Flexbox Utilities:

Vierspalter - grid-margin-x - aligned content

 

Cras dapibus. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec posuere vulputate arcu.

In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec vitae orci sed dolor rutrum auctor. Quisque ut nisi. Praesent ac massa at ligula laoreet iaculis.

Second

Cras dapibus. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec posuere vulputate arcu.

Third

Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec posuere vulputate arcu.

Fourth

Cras dapibus. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec posuere vulputate arcu.

In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec vitae orci sed dolor rutrum auctor. Quisque ut nisi. Praesent ac massa at ligula laoreet iaculis.

Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec posuere vulputate arcu.

Zweispalter - normal | grid-margin-x grid-padding-x

small-12 medium-3 bg3 | small-12 medium-3 bg3

Text 1

Etiam iaculis nunc ac metus. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Donec mollis hendrerit risus. 

Text 2

Etiam iaculis nunc ac metus. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Donec mollis hendrerit risus. 

Zweispalter - rechts | grid-margin-x grid-padding-x align-right

small-12 medium-3 bg3 | small-12 medium-3 bg3

Text 1

Etiam iaculis nunc ac metus. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Donec mollis hendrerit risus. 

Text 2

Etiam iaculis nunc ac metus. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Donec mollis hendrerit risus. 

Zweispalter - zentriert x | grid-margin-x grid-padding-x align-center

small-12 medium-3 bg3 | small-12 medium-3 bg3

Text 1

Etiam iaculis nunc ac metus. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Donec mollis hendrerit risus. 

Text 2

Etiam iaculis nunc ac metus. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Donec mollis hendrerit risus. 

Zweispalter - justify x | grid-margin-x grid-padding-x align-justify

small-12 medium-3 bg3 | small-12 medium-3 bg3

Text 1

Etiam iaculis nunc ac metus. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Donec mollis hendrerit risus. 

Text 2

Etiam iaculis nunc ac metus. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Donec mollis hendrerit risus. 

Zweispalter - space x | grid-margin-x grid-padding-x align-spaced

small-12 medium-3 bg3 | small-12 medium-3 bg3

Text 1

Etiam iaculis nunc ac metus. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Donec mollis hendrerit risus. 

Text 2

Etiam iaculis nunc ac metus. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Donec mollis hendrerit risus. 

Zweispalter - zentriert x +y | grid-margin-x grid-padding-x align-center-middle text-center hv50

small-12 medium-5 bg3 | small-12 medium-5 bg3

Text 1

Etiam iaculis nunc ac metus. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Donec mollis hendrerit risus. 

Text 2

Etiam iaculis nunc ac metus. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Donec mollis hendrerit risus. 

Vierspalter - expert: grid-margin-x align-middle

size m

Duis leo. Maecenas vestibulum mollis diam. Curabitur ullamcorper ultricies nisi. Sed lectus. Donec posuere vulputate arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Spalte 2

Duis leo. Maecenas vestibulum mollis diam. 

size l

Duis leo. Maecenas vestibulum mollis diam. Curabitur ullamcorper ultricies nisi. Sed lectus. Donec posuere vulputate arcu. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus. In ut quam vitae odio lacinia tincidunt. Praesent congue erat at massa. Pellentesque posuere.

four

Duis leo. Maecenas vestibulum mollis diam. Curabitur ullamcorper ultricies nisi. Sed lectus. Donec posuere vulputate arcu.

Vierspalter - expert: grid-margin-x grid-padding-x align-bottom

size m

Duis leo. Maecenas vestibulum mollis diam. Curabitur ullamcorper ultricies nisi. Sed lectus. Donec posuere vulputate arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Spalte 2

Duis leo. Maecenas vestibulum mollis diam. 

size l

Duis leo. Maecenas vestibulum mollis diam. Curabitur ullamcorper ultricies nisi. Sed lectus. Donec posuere vulputate arcu. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus. In ut quam vitae odio lacinia tincidunt. Praesent congue erat at massa. Pellentesque posuere.

four

Duis leo. Maecenas vestibulum mollis diam. Curabitur ullamcorper ultricies nisi. Sed lectus. Donec posuere vulputate arcu.

Vierspalter - expert: grid-margin-x grid-padding-x align-stretch

size m

Duis leo. Maecenas vestibulum mollis diam. Curabitur ullamcorper ultricies nisi. Sed lectus. Donec posuere vulputate arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Spalte 2

Duis leo. Maecenas vestibulum mollis diam. 

size l

Duis leo. Maecenas vestibulum mollis diam. Curabitur ullamcorper ultricies nisi. Sed lectus. Donec posuere vulputate arcu. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus. In ut quam vitae odio lacinia tincidunt. Praesent congue erat at massa. Pellentesque posuere.

four

Duis leo. Maecenas vestibulum mollis diam. Curabitur ullamcorper ultricies nisi. Sed lectus. Donec posuere vulputate arcu.

Vierspalter - expert: grid-margin-x grid-padding-x align-self-bottom und -medium (Spalte 2 und 4)

Ausrichtung der kompletten Spalte inkl. Hintergrund

size m

Duis leo. Maecenas vestibulum mollis diam. Curabitur ullamcorper ultricies nisi. Sed lectus. Donec posuere vulputate arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Spalte 2

Duis leo. Maecenas vestibulum mollis diam. 

size l

Duis leo. Maecenas vestibulum mollis diam. Curabitur ullamcorper ultricies nisi. Sed lectus. Donec posuere vulputate arcu. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus. In ut quam vitae odio lacinia tincidunt. Praesent congue erat at massa. Pellentesque posuere.

four

Duis leo. Maecenas vestibulum mollis diam. Curabitur ullamcorper ultricies nisi. Sed lectus. Donec posuere vulputate arcu.

Vierspalter - wie vorheriger mit Background 100% - expert: grid-margin-x align-stretch | small-12 medium-auto | innercol

size m

Duis leo. Maecenas vestibulum mollis diam. Curabitur ullamcorper ultricies nisi. Sed lectus. Donec posuere vulputate arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

flex-align-bottom

Duis leo. Maecenas vestibulum mollis diam. Curabitur ullamcorper ultricies nisi. Sed lectus. Donec posuere vulputate arcu.

size l

Duis leo. Maecenas vestibulum mollis diam. Curabitur ullamcorper ultricies nisi. Sed lectus. Donec posuere vulputate arcu. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus. In ut quam vitae odio lacinia tincidunt. Praesent congue erat at massa. Pellentesque posuere.

four

Duis leo. Maecenas vestibulum mollis diam. Curabitur ullamcorper ultricies nisi. Sed lectus. Donec posuere vulputate arcu.

Dreispalter - grid-x - gleiche Höhe (equalizer) - Spalte 3: grid-y 50% gleiche Höhe

Spalte 1 - normaler Inhalt

Sed hendrerit. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Aliquam erat volutpat. Donec mollis hendrerit risus. Nullam tincidunt adipiscing enim. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Nunc nonummy metus. Duis leo. In hac habitasse platea dictumst. Vestibulum fringilla pede sit amet augue. Nunc nonummy metus. Duis leo. In hac habitasse platea dictumst. Vestibulum fringilla pede sit amet augue.

Spalte 2 - Bilder

Spalte 1 - Expert

small-12 medium-auto mb6 pa3 bg6

Spalte 2 - Expert

small-12 medium-auto pa3 bg6 - parent: grid-y h100

Vertical Grids:

Dreispalter - Vertical - grid-y | Elements: small-12 medium-shrink bg1 pa4

size m

Duis leo. Maecenas vestibulum mollis diam. Curabitur ullamcorper ultricies nisi. Sed lectus. Donec posuere vulputate arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Spalte 2

Duis leo. Maecenas vestibulum mollis diam. 

size l

Duis leo. Maecenas vestibulum mollis diam. Curabitur ullamcorper ultricies nisi. Sed lectus. Donec posuere vulputate arcu. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus. In ut quam vitae odio lacinia tincidunt. Praesent congue erat at massa. Pellentesque posuere.