– Grid –
Grid
eine kleine Einführung in Rasteresysteme
Was ist ein Grid
und wofür ist es gut?
Beispiel: 12 column Grid - 960px
Einteilung des Grids in columns und gutter
Gesamte Breite ist 960px
Abstand links und rechts jeweils 10px,
man hat also 940px für den
sichtbaren Teil der Seite
1 column hat 60px
ein gutter hat 20px
4 colums haben 300px,
4x 60px + 3x 20px
Hier ein verschachteltes Grid bestehend aus einer 6er column, welche zwei 3er columns beinhaltet.
1180 Grid
20 x 40px
+ 19 x
20 px
(gutter width)
WANN GIBTS PROBLEME?
Wenn der Inhalt einer zusammenhängenden Einheit auf ein gutter fällt, gibt es Probleme.
Würde eine weitere column direkt auf die erste column folgen, gäbe es nicht genug Platz, was zu erheblichen Problemen in der technischen Umsetzung führt.
Lösung
Die columns müssen sich immer über die Gesamte Breite erstrecken. In diesem Beispiel müsste man also ein 5 column Element benutzen wenn man ein Content-Element > 300px nutzen möchte.
Beispiel
AUSBLICK
“ The grid system is an aid, not a guarantee.
It permits a number of possible uses and each
designer can look for a solution appropriate to hispersonal style. But one must learn how to use thegrid; it is an art that requires practice. ”Josef Müller-Brockmann