Statisches 12-Spalten-Grid (Raster)

von Oliver Richter (Kommentare: 0)

Bild: 12-er CSS-Grid

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:

Zurück

Einen Kommentar schreiben

Bachten Sie: Für die Zuordnung Ihrer Nachricht werden die hier anzugebenden Daten Name, E-Mailadresse, Ihr Kommentar gespeichert. Sofern Sie den Wunsch der E-Mail-Benachrichtigung angegeben haben, wird aufgrund technischer Notwendigkeit auch dieser Wert gespeichert. Durch Absenden des Formulars erklären Sie sich damit einverstanden. Alternativ kontaktieren Sie mich bitte über meine E-Mailadresse oder Telefon.
Detaillierte und weitere Hinweise, insb. zum Widerrufsrecht finden Sie in der Datenschutzerklärung.

Sie befinden Sich in der Detailansicht eines Blog-Eintrags.

Um alle Blog-Einträge zu sehen, wechseln Sie bitte zur Nachrichten-Übersicht

Wie kann ich Ihnen helfen?

Sie erreichen mich über mein Kontaktformular