Das 1120er Pixel Grid - ohne Holy Grail, 2 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 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 zwei Artikel angelegt.

 

Der erste Artikel hat die Grid Klasse "grid3" und beinhalted die Navigation als Modul. Der zweite Artikel hat die Grid-Klasse "grid13" und enthält diesen Text. Beide Grid-Klassen ergeben somit die 16 Spalten (3+13) 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 Grid7

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

Element mit Grid6

Dieses Element ist auf 6 Spalten reduziert (grid6), damit das zusammen wieder die 13 Spalten ergeben. Darauf sollte man achten, um bei weiteren Elementen nicht eine falsche Anordung zu erhalten.

Element mit Grid13

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

Element mit Grid10 und Offset3

Dieses Element hat nun zusätzlich zu "grid10" die Angabe "offset3". Damit wird das Element um 3 Grid Spalten verschoben, die Gesamtbreite sind wieder 13 Grid Spalten.