Content Management System
and Frontend Framework
Sie sind hier: Home > Framework > Das Grundraster

Das Grundraster

Das Grundraster (Grid) sorgt für die flexible Anpassung der Inhalte auf unterschiedlich breiten Ausgabegeräten. Das Raster basiert auf einer 12er-Einteilung. Eine Breite von 12 entspricht dabei 100%, eine Breite von 6 entspricht 50% u.s.w.. In der Summe muss jeder Reihe eine Breite von 12 haben. Die Breiten für die verschiedenen Geräte können mir class="large-Breite" (z.B. large-12), class="medium-Breite" und class="small-Breite" auf alle Elemente gesetzt werden, was überflüssige div-Container spart.

Beispiele für 2-teilige Raster

11
1
10
2
9
3
8
4
7
5
6
6

Beispiele für 3-teilige Raster

1
10
1
2
8
2
3
6
3
4
4
4
5
2
5

Beispiele für 4-teilige Raster

1
2
4
5
2
4
4
2
3
3
3
3

Beispiele für weitere Raster

12
3
2
5
2
2
2
2
2
2
2
1
1
1
1
1
1
1
1
1
1
1
1
61,8% (Goldener Schnitt lang)
38,2% (Goldener Schnitt kurz)