Demo [euf_grid] - Version 3
Seit Version 3 basiert unsere Contao Erweiterung [euf_grid] auf CSS-Grid-Layout, statt wie bisher auf floating. Diese Demo dient dazu, die geänderten CSS-Anweisungen besser nachvollziehen zu können und die zusätzlichen Klassen im Einsatz zu sehen.
Standard-Verhalten
Wenn du lediglich die Grid-Klassen .col-xs-1 bis .col-xl-12 verwendest, dann ist folgende Darstellung das Standardverhalten der Spalten:
.col-xs-6
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
.col-xs-6
Aed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
Wenn der Inhalt weniger hoch als die Spalte ist …
.col-xs-6
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
.col-xs-6 (Standardverhalten = align-stretch)
Aed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
.col-xs-6
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
.col-xs-6 + .align-center
Aed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
.col-xs-6
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
.col-xs-6 + .align-end
Aed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
Wenn der Inhalt weniger breit als die Spalte ist …
.col-xs-6
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
.col-xs-6
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
.col-xs-6
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
.col-xs-6
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
.col-xs-6
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.