Container-Verhalten aus DEMO-Version

Die hier angeführten Beispiele stammen aus der Demo-Version "Containerverhalten" vom Hauptteil 1 und basieren auf Elemente von HTML 5 (Kindelemente). Die Formatierung in Abhängigkeit zur Breite zeigte sich hier in der Praxis etwas flexibler und schneller. Ganz besonders die Eigenschaften des margin-left oder margin-right, welches als Randabstand dient, lässt sich in dieser Variante leicht und kontrolliert steuern.

Auch wenn die Lösung ohne HTML5 Elemente (eine Ebene höher) aus Sicht der Browser-Kompatibilität stabiler ist, so soll die hier dargestellte Möglichkeit nicht unbetrachtet sein. 

Beispiel - Das Vierer-Grid

Grid4 - Column 1

Grid4 - Column 2

Grid4 - Column 3

Grid4 - Column 4

Grid4 - Column 5

Grid4 - Column 6

Grid4 - Column 7

Grid4 - Column 8


Beispiel - Das Dreier-Grid

Grid 3 - Column 1

Grid 3 - Column 2

Grid 2 - Column 3

Grid 3 - Column 4

Grid 3 - Column 5

Grid 3 - Column 6

Grid 3 - Column 7

Grid 3 - Column 8

Grid 3 - Column 9


Beispiel - Das Zweier-Grid

Grid 2 - Column 1

Grid 2 - Column 2

Grid 2 - Column 3

Grid 2 - Column 4

Grid 2 - Column 5

Grid 2 - Column 6

Grid 2 - Column 7

Grid 2 - Column 8

Grid 2 - Column 9