Das 1120er Pixel Grid - mit Holy Grail, 2 Spalten

Diese Seite ist nun also 1120 Pixel breit und besteht intern aus Header, Left, Main, Footer. Zu diesem Zweck wurde ein eigenes Layout angelegt welches diese Definitionen hat, in dem Fall wurde "left" über den Layout Builder definiert. Weiterhin ist dort bei CSS-Framework aktiviert:

  • CSS-Reset
  • Layout-Builder
  • Responsive Grid, Pixel, 1120px-16
  • eine Korrektur CSS Datei

Die Spalte "left" bekam eine Definition von 190+20=210px (entspricht grid3 + 2x Abstände). Da das Grid nur bei Artikeln die Abstände einbaut in Form von Margins, fehlen diese nun innerhalb von "left". Hier gibt es nun zwei Möglichkeiten:

  • in "left" ein Artikel anlegen (dazu im Layout ermöglichen dazu)
  • per CSS die Margins selber setzen
    ( #left .inside { margin-left:10px; margin-right:10px } )

Ich habe mich hier für die CSS Variante entschieden. In der Seite wurden dann ein Artikel angelegt. Dieser 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 Holy Grail Floating sind diese beiden "Spalten" nebeneinander positioniert. Wichtig hierbei, der Artikel hat eine Grid-Klasse zu bekommen.

 

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.