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
First
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.
Dreispalter - Vertical - grid-y medium-grid-frame (=100% viewport) | Elements: shrink auto(overflow auto) shrink
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;
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.
Spalte 2
Duis leo. Maecenas vestibulum mollis diam.