Vergleichsseite
Flex gegen Grid
Vier Paare, jeweils derselbe Inhalt: oben Grid, wie auf der Musterseite, darunter Flex, wie man in Divi von Hand baut. An jedem Abschnitt steht, was zu sehen sein soll. Zum Pruefen das Fenster schmalerziehen: Tablet zwei Spalten, Handy eine.
1A Drei Karten — Grid
Positivkontrolle, gebaut wie Musterseite Abschnitt 3. Drei gleich breite, gleich hohe Karten; Tablet 2 + 1, Handy untereinander. Das lange Wort bricht um und macht seine Spalte nicht breiter.
Karte 1
Gewaltpraeventionsveranstaltungsteilnehmerinnenliste — dieses Wort ist absichtlich zu lang fuer seine Spalte.
Karte 2
Ein mittellanger Absatz. Er ist laenger als der kurze, damit die Hoehenangleichung sichtbar wird, wenn die Karten nebeneinander stehen.
Karte 3
Kurzer Text.
1B Drei Karten — Flex
Dasselbe als Flex mit Spaltenbreiten 1/3, 1/2, 1/1. Zu sehen sein soll dasselbe wie in 1A. Abweichungen sind das Ergebnis: ungleiche Breite, ungleiche Hoehe, uebergelaufenes Wort, falscher Umbruch.
Karte 1
Gewaltpraeventionsveranstaltungsteilnehmerinnenliste — dieses Wort ist absichtlich zu lang fuer seine Spalte.
Karte 2
Ein mittellanger Absatz. Er ist laenger als der kurze, damit die Hoehenangleichung sichtbar wird, wenn die Karten nebeneinander stehen.
Karte 3
Kurzer Text.
2A Sechs Karten — Grid
Zwei Zeilen zu je drei Karten, alle gleich breit, je Zeile gleich hoch. Tablet drei Zeilen zu zwei.
Karte 1
Kurzer Text.
Karte 2
Ein mittellanger Absatz. Er ist laenger als der kurze, damit die Hoehenangleichung sichtbar wird, wenn die Karten nebeneinander stehen.
Karte 3
Kurzer Text.
Karte 4
Ein mittellanger Absatz. Er ist laenger als der kurze, damit die Hoehenangleichung sichtbar wird, wenn die Karten nebeneinander stehen.
Karte 5
Kurzer Text.
Karte 6
Gewaltpraeventionsveranstaltungsteilnehmerinnenliste — dieses Wort ist absichtlich zu lang fuer seine Spalte.
2B Sechs Karten — Flex
Dasselbe als Flex. Stehen alle sechs in EINER Zeile, bricht die Row nicht um.
Karte 1
Kurzer Text.
Karte 2
Ein mittellanger Absatz. Er ist laenger als der kurze, damit die Hoehenangleichung sichtbar wird, wenn die Karten nebeneinander stehen.
Karte 3
Kurzer Text.
Karte 4
Ein mittellanger Absatz. Er ist laenger als der kurze, damit die Hoehenangleichung sichtbar wird, wenn die Karten nebeneinander stehen.
Karte 5
Kurzer Text.
Karte 6
Gewaltpraeventionsveranstaltungsteilnehmerinnenliste — dieses Wort ist absichtlich zu lang fuer seine Spalte.
3A Verhaeltnis 3:2 — Grid
Linke Karte breiter als die rechte, Verhaeltnis 3:2, beide gleich hoch. Handy untereinander.
Karte 1
Ein mittellanger Absatz. Er ist laenger als der kurze, damit die Hoehenangleichung sichtbar wird, wenn die Karten nebeneinander stehen.
Karte 2
Kurzer Text.
3B Verhaeltnis 3:2 — Flex
Dasselbe als Flex mit Divis Fuenfteln 3/5 und 2/5.
Karte 1
Ein mittellanger Absatz. Er ist laenger als der kurze, damit die Hoehenangleichung sichtbar wird, wenn die Karten nebeneinander stehen.
Karte 2
Kurzer Text.
4A Buttonreihe — Grid
Drei Buttons nebeneinander, mittig, in ihrer natuerlichen Breite. Handy untereinander.
4B Buttonreihe — Flex
Dasselbe als eine Spalte mit Flex und Umbruch. Wird es eng, rutscht ein Button in die naechste Zeile und bleibt mittig.