We use cookies to personalize content and ads of our website, to bring you social media functions, and to analyze the traffic to our website. We also share the collected data with our partners, who in turn may use it for social media, advertisement and analysis.More information
I accept

Raster

Spaltenraster "960 Grid"

Der Spaltenraster "960 Grid" nimmt Anleihen am bekannten 960 Grid System. Dabei wird die gesamte Breite des Spalten-Elements in 12 gleich große Einheiten aufgeteilt. Dieses Rastersystem gewährleistet optisch saubere Layouts "out of the box", welche mittels Mediaqueries einfach für kleinere Display-Großen adaptierbar sind.

weitere Optionen

Im Formular "weitere Optionen" können für den 2- und 3-Spalter alternative Spalten-Einteilungen ausgewählt werden.
Insgesamt stehen 11 alternative Layout-Vorschläge zur Verfügung.

Aktivieren

Für einzelne Unterseiten: Das "960 Grid" kann für einzelne Unterseiten über die Seiteneigenschaften > Layout aktiviert werden

Für das gesamte Projekt oder für spezielle Contentbereiche:
Das "960 Grid" wird mittels der Klasse .bh-grid960 aktiv

CSS

.bh-grid960 .bhCols .bhCol {margin-right: 2.1276595745%}

.bh-grid960 .bhCols .cols2 .bhCol {width: 48.9361702129%}
.bh-grid960 .bhCols .cols3 .bhCol {width: 31.9148936171%}
.bh-grid960 .bhCols .cols4 .bhCol {width: 23.4042553192%}
.bh-grid960 .bhCols .cols5 .bhCol {width: 18.2978723404%}
.bh-grid960 .bhCols .cols6 .bhCol {width: 14.8936170213%}

.bh-grid960 .bhCols .cols2.cols2-2-10 .col1 {width: 14.8936170213%} .bh-grid960 .bhCols .cols2.cols2-2-10 .col2 {width: 82.9787234045%}
.bh-grid960 .bhCols .cols2.cols2-10-2 .col1 {width: 82.9787234045%} .bh-grid960 .bhCols .cols2.cols2-10-2 .col2 {width: 14.8936170213%}
.bh-grid960 .bhCols .cols2.cols2-3-9 .col1 {width: 23.4042553192%} .bh-grid960 .bhCols .cols2.cols2-3-9 .col2 {width: 74.4680851066%}
.bh-grid960 .bhCols .cols2.cols2-9-3 .col1 {width: 74.4680851066%} .bh-grid960 .bhCols .cols2.cols2-9-3 .col2 {width: 23.4042553192%}
.bh-grid960 .bhCols .cols2.cols2-4-8 .col1 {width: 31.9148936171%} .bh-grid960 .bhCols .cols2.cols2-4-8 .col2 {width: 65.9574468087%}
.bh-grid960 .bhCols .cols2.cols2-8-4 .col1 {width: 65.9574468087%} .bh-grid960 .bhCols .cols2.cols2-8-4 .col2 {width: 31.9148936171%}
.bh-grid960 .bhCols .cols2.cols2-5-7 .col1 {width: 40.4255319150%} .bh-grid960 .bhCols .cols2.cols2-5-7 .col2 {width: 57.4468085108%}
.bh-grid960 .bhCols .cols2.cols2-7-5 .col1 {width: 57.4468085108%} .bh-grid960 .bhCols .cols2.cols2-7-5 .col2 {width: 40.4255319150%}

.bh-grid960 .bhCols .cols3.cols3-3-3-6 .col1 {width: 23.4042553192%} .bh-grid960 .bhCols .cols3.cols3-3-3-6 .col2 {width: 23.4042553192%}
.bh-grid960 .bhCols .cols3.cols3-3-3-6 .col3 {width: 48.9361702129%}
.bh-grid960 .bhCols .cols3.cols3-6-3-3 .col1 {width: 48.9361702129%} .bh-grid960 .bhCols .cols3.cols3-6-3-3 .col2 {width: 23.4042553192%}
.bh-grid960 .bhCols .cols3.cols3-6-3-3 .col3 {width: 23.4042553192%}
.bh-grid960 .bhCols .cols3.cols3-3-6-3 .col1 {width: 23.4042553192%} .bh-grid960 .bhCols .cols3.cols3-3-6-3 .col2 {width: 48.9361702129%}
.bh-grid960 .bhCols .cols3.cols3-3-6-3 .col3 {width: 23.4042553192%}