Das 1120er Pixel Grid - ohne Holy Grail, 3 Spalten
Diese Seite ist 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 dort bei CSS-Framework aktiviert:
- CSS-Reset
- Layout-Builder (nicht zwingend nötig, aber der generiert hier die Breite und Zentrierung im <head> Bereich, dass müsste man sonst im eigenem CSS nachbilden)
- Responsive Grid, Pixel, 1120px-16
In der Seite wurden dann drei Artikel angelegt.
Der erste Artikel hat die Grid Klasse "grid3" und beinhalted 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 drei Grid-Klassen ergeben somit die 16 Spalten (3+10+3) und nehmen damit die komplette Breite ein.
Durch das Grid-Floating sind diese drei Artikel nebeneinander positioniert. Es wurde also auf dieser Art und Weise ein Drei-Spalten-Layout nachgebildet. Wichtig hierbei, die Artikel haben die Grid-Klassen 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 Anordung zu erhalten.
Element mit Grid10
Dieses Element hat nun zusätzlich die "grid10" Angabe. Das ist nicht unbedingt nötig, da es ohne Angabe ebendso die komplette Breite einnehmen würde. Fällt jedoch beispielsweise das obige rechte "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.