Das 1140er Prozent Grid - 3 Spalten

Diese Seite ist nun also 1140 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:

Prozent, 1140px-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". Alle 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 Zwei-Spalten-Layout nachgebildet. Wichtig hierbei, die Artikel haben die Grid-Klasse bekommen, nicht die Elemente!

Element mit Grid8

Innerhalb des Grid-Artikels kann man dann natürlich auch die Grid-Klassen verwenden. Beim Prozent-Grid muss man hier nun beachten, dass die Prozent Angaben, und somit die Grid-Klassen, relativ zum übergeordnetem Rahmen liegt. Die Berechnung der 100% Gesamtbreite beginnt also von vorn! Da wir also wieder auf 100% kommen müssen, wurde dieses Element hier auf 8 Spalten reduziert (grid8).

Element mit Grid8

Dieses Element ist auf 8 Spalten reduziert (grid8), damit das zusammen wieder die 16 (internen) Spalten = 100% ergeben. Darauf sollte man achten, um bei weiteren Elementen nicht eine falsche Anordung zu erhalten.

Element mit Grid10 und Offset6

Dieses Element hat zusätzlich zur "grid10" Angabe noch eine "offset6" Angabe. Die Spalte hat somit wieder die volle Breite von 16 Spalten, ist selber 10 Spalten Breit und durch den "offset6" um 6 Spalten verschoben.

Grid3 Spalte

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