Das 1120er Pixel Grid - 3 Spalten

Diese Seite ist nun also 1120 Pixel breit und besteht intern nur aus Header, Main, Footer. Zu diesem Zweck wurde ein eigenes Layout angelegt welches diese Definitionen hat.

Weiterhin ist im Page Layout u.a. definiert:

Pixel, 1120px-16

In der Seite wurden dann zwei Artikel angelegt.

Der erste Artikel hat die Grid Klasse "grid3" und beinhaltet die Navigation als Modul. Der zweite Artikel hat die Grid-Klasse "grid10" und enthält diesen Text. Der dritte Artikel hat die Grid-Klasse "grid3". All Grid-Klassen ergeben somit die 16 Spalten (3+10+3) und nehmen damit die komplette Breite ein.

Durch das Grid-Floating sind diese beiden Artikel nebeneinander positioniert. Es wurde also auf dieser Art und Weise ein Drei-Spalten-Layout nachgebildet. Wichtig hierbei, die Artikel haben die Grid-Klasse bekommen, nicht die Elemente!

Element mit Grid5

Innerhalb des Grid-Artikels kann man dann natürlich auch die Grid-Klassen verwenden. Da wir in der Main-Spalte auf 10 Spalten kommen müssen, wurde dieses Element hier auf 5 Spalten reduziert (grid5).

Element mit Grid5

Dieses Element ist auf 5 Spalten reduziert (grid5), damit das zusammen wieder die 10 Spalten ergeben. Darauf sollte man achten, um bei weiteren Elementen nicht eine falsche Anordnung zu erhalten.

Element mit Grid10

Dieses Element hat nun zusätzlich die "grid10" Angabe. Das ist nicht unbedingt nötig, da es ohne Angabe ebenso die komplette Breite einnehmen würde. Fällt jedoch beispielsweise das obige "Element mit Grid5" weg, würde dieses Elemente durch das Floating nach oben positioniert werden. Das passiert nun durch die "grid10" Angabe nicht, da die Spalte damit nicht mehr daneben passt.

Grid3 Spalte

Hier wird eine dritte Spalte durch einen dritten Artikel nachgebildet. Dieser Artikel hat die Grid-Klasse "grid3" bekommen.