Das 1140er Prozent Grid - ohne Holy Grail, 2 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 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, Prozent, 1140px-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 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.

 

Element mit Grid4

Dieses Element hat nur eine "grid4" Angabe. Diese Zeile soll aus 3 Spalten inkl. zweier Offsets bestehen.

Dient als reiner Test der Mathematik im Grid.

Element mit Grid4 und offset2

Dieses Element hat eine "grid4" und eine "offset2" Angabe.

Element mit Grid4 und offset2

Dieses Element hat eine "grid4" und eine "offset2" Angabe.