Statisches 12-Spalten-Grid (Raster)
von Oliver Richter (Kommentare: 0)
Es gibt viele gute und sinnvolle CSS-Grids, Raster für Webseiten und Webanwendungen. Vor allem gibt es eine Reihe guter Generatoren, die das gewünschte und individuell benötigte Grid errechnen und ausgeben wie z.B. http://gridr.atomeye.com.
Ich selbst verwende immer wieder das folgende: Es besteht aus maximal 12 Spalten pro Reihe, wobei bei 12 Spalten jede einzelne 70 Pixel breit ist einen Rechtsrand von 6 Pixeln besitzt und stets links angeordnet wird. Spalten können zusammengefasst werden, z.B. 2 Spalten werden zu einer zusammengefasst oder 3 Spalten zu einer usw. und der restliche Platz wird mit einzelnen kleinen oder anderen zusammengefassten Spalten aufgefüllt. Die folgende Grafik verdeutlicht das Ganze.
Für die responsiven Ansichten müssen zusätzlich, je nach Anforderung, noch Definitionen zum Verhalten der Spalten bei geringem Platz vorgenommen werden.
Via JavaScript können ggf. entstehende Lücken auch noch sinnvoll geschlossen werden. Auch hier gibt es eine Reihe von fertigen Lösungen.
Die CSS-Anweisungen sehen wie folgt aus:
.b1, .b2, .b3, .b4, .b5, .b6, .b7, .b8, .b9, .b10, .b11, .b12
{
float: left;
margin: 0px 20px 20px 0px;
max-width: 100%;
}
.b1 { width: 60px; }
.b2 { width: 140px; }
.b3 { width: 220px; }
.b4 { width: 300px; }
.b5 { width: 380px; }
.b6 { width: 460px; }
.b7 { width: 540px; }
.b8 { width: 620px; }
.b9 { width: 700px; }
.b10 { width: 780px; }
.b11 { width: 860px; }
.b12 { width: 940px; margin-right: 0; }
.lm1 { margin-left: 80px; }
.lm2 { margin-left: 160px; }
.lm3 { margin-left: 240px; }
.lm4 { margin-left: 320px; }
.lm5 { margin-left: 400px; }
.lm6 { margin-left: 480px; }
.lm7 { margin-left: 560px; }
.lm8 { margin-left: 640px; }
.lm9 { margin-left: 720px; }
.lm10 { margin-left: 800px; }
.lm11 { margin-left: 880px; }
.rm1 { margin-right: 80px; }
.rm2 { margin-right: 160px; }
.rm3 { margin-right: 240px; }
.rm4 { margin-right: 320px; }
.rm5 { margin-right: 400px; }
.rm6 { margin-right: 480px; }
.rm7 { margin-right: 560px; }
.rm8 { margin-right: 640px; }
.rm9 { margin-right: 720px; }
.rm10 { margin-right: 800px; }
.rm11 { margin-right: 880px; }
.last-col, .col-last, .col_last { margin-right: 0; }Das zum CSS passende Markup zum obigen Beispiel könnte so aussehen:
<h2>Boxen-Grid-System</h2>
<h3>Grid-System (12 x 1er)</h3>
<div class="b1">Lorem ipsum dolor sit amet consetetur</div>
<div class="b1">Lorem ipsum dolor sit amet consetetur</div>
<div class="b1">Lorem ipsum dolor sit amet consetetur</div>
<div class="b1">Lorem ipsum dolor sit amet consetetur</div>
<div class="b1">Lorem ipsum dolor sit amet consetetur</div>
<div class="b1">Lorem ipsum dolor sit amet consetetur</div>
<div class="b1">Lorem ipsum dolor sit amet consetetur</div>
<div class="b1">Lorem ipsum dolor sit amet consetetur</div>
<div class="b1">Lorem ipsum dolor sit amet consetetur</div>
<div class="b1">Lorem ipsum dolor sit amet consetetur</div>
<div class="b1">Lorem ipsum dolor sit amet consetetur</div>
<div class="b1 col-last">Lorem ipsum dolor sit amet</div>
<h3>Grid-System (6 x 2er)</h3>
<div class="b2">Lorem ipsum dolor sit amet consetetur</div>
<div class="b2">Lorem ipsum dolor sit amet consetetur</div>
<div class="b2">Lorem ipsum dolor sit amet consetetur</div>
<div class="b2">Lorem ipsum dolor sit amet consetetur</div>
<div class="b2">Lorem ipsum dolor sit amet consetetur</div>
<div class="b2 col-last">Lorem ipsum dolor sit amet</div>
<h3>Grid-System (4 x 3er)</h3>
<div class="b3">Lorem ipsum dolor sit amet consetetur</div>
<div class="b3">Lorem ipsum dolor sit amet consetetur</div>
<div class="b3">Lorem ipsum dolor sit amet consetetur</div>
<div class="b3 col-last">Lorem ipsum dolor sit amet</div>
<h3>Grid-System (3 x 4er)</h3>
<div class="b4">Lorem ipsum dolor sit amet consetetur</div>
<div class="b5">Lorem ipsum dolor sit amet consetetur</div>
<div class="b4 col-last">Lorem ipsum dolor sit amet</div>
<h3>Grid-System (2 x 6er)</h3>
<div class="b6">Lorem ipsum dolor sit amet consetetur</div>
<div class="b6 col-last">Lorem ipsum dolor sit amet</div>
<h3>Grid-System (1 x 12er)</h3>
<div class="b12 col-last">Lorem ipsum dolor sit amet</div>
<h3>Grid-System (Mix: 1x4er + 1x5er + 1x3er)</h3>
<div class="b4">Lorem ipsum dolor sit amet consetetur</div>
<div class="b5">Lorem ipsum dolor sit amet consetetur</div>
<div class="b3 col-last">Lorem ipsum dolor sit amet</div>Zum Schluss möchte ich hier noch mal als Hilfe eine PNG-Datei mit dem 960-er-Grid und eine entsprechende PSD für Photoshop zur Verfügung stellen:
Sie befinden Sich in der Detailansicht eines Blog-Eintrags.
Um alle Blog-Einträge zu sehen, wechseln Sie bitte zur Nachrichten-Übersicht.
Einen Kommentar schreiben