Einfaches 5-Spalten-Raster (Grid)

von Oliver Richter (Kommentare: 0)

Bild: 5-Spalten-Raster-Beispiel

Hier stelle ich ein sehr einfaches 5-Spalten-Raster vor, wobei es sich um eine prozentuale Aufteilung der Spalten handelt. Das Beispiel hier liegt in einer Basis-Version vor und sollte den entsprechenden Layoutkonditionen angepasst werden (z.B. maximale Breite des Layouts, Layout-Breaks usw.). Bei Bildschirmbreiten ab 620 Pixel (ohne Scollleiste) werden pro Reihe nur noch eine Spalte dargestellt, es rutschen also alle Spalten untereinander. 

Es wird auf das Border-Box-Modell zurück gegriffen, sollte also ab Internet Explorer 8 funktionieren. 

Spalten können Links- und Rechtsabstände in der Größe von Spalten-Breiten aufweisen und Spalten können ineinander verschachtelt werden.  

Hier nun die Stylesheet-Anweisungen für das Grid

/***** Start: Grid (5er-Prozent-Grid) *************************************/  
.grid-row { clear: both; margin: 0px 0px 10px 0px; }
.grid-row:before, .grid-row:after { display: block; content: ""; clear: both; } 

.grid-row .grid-row { margin-bottom: 0; } 

.grid-row .col-20p  { width: 20%; float: left; padding: 10px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
.grid-row .col-40p  { width: 40%; float: left; padding: 10px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
.grid-row .col-60p  { width: 60%; float: left; padding: 10px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
.grid-row .col-80p  { width: 80%; float: left; padding: 10px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
.grid-row .col-100p { width: 100%; float: none; padding: 10px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
 
.grid-row .lm-20p { margin-left: 20%; } 
.grid-row .lm-40p { margin-left: 40%; }
.grid-row .lm-60p { margin-left: 60%; }
.grid-row .lm-80p { margin-left: 80%; }

.grid-row .rm-20p { margin-right: 20%; } 
.grid-row .rm-40p { margin-right: 40%; }
.grid-row .lm-60p { margin-right: 60%; }
.grid-row .rm-80p { margin-right: 80%; }
 
@media screen and (max-width: 619px)
 { 
  .grid-row .col-20p, .grid-row .col-40p, .grid-row .col-60p, .grid-row .col-80p, .grid-row .col-100p { width: 100%; float: none; }
  .grid-row .lm-20p, .grid-row .lm-40p, .grid-row .lm-60p, .grid-row .lm-80p, .grid-row .rm-20p, .grid-row .rm-40p, .grid-row .rm-60p, .grid-row .rm-80p { margin-left: 0; margin-right: 0; }
 }

Hier einige Markup-Beispiele für die obigen CSS-Anweisungen

Als erstes der Standard-Fall: Es gibt mehrere Spalten mit unterschiedlicher Breite:

<div class="grid-row">
  <div class="col-20p">20% Breite</div>
  <div class="col-60p">60% Breite</div>
  <div class="col-20p">20% Breite</div>
 </div>
 
 <div class="grid-row">
  <div class="col-60p">60% Breite</div>
  <div class="col-40p">40% Breite</div>
 </div> 
      
 <div class="grid-row">
  <div class="col-80p">80% Breite</div>
  <div class="col-20p">20% Breite</div>
 </div>

Und hier ein Beispiel für eine Spalte mit einem Rechtsrand:

<div class="grid-row">
  <div class="col-60p lm-20p rm-20p">60% Breite + 20% Links- und Rechtsrand</div>
 </div>

Und hier ein Beispiel, bei dem in den beiden Spalten sich jeweils wieder zwei weitere Spalten befinden:

<div class="grid-row">
  <div class="col-60p">
   <div class="grid-row">
    <div class="col-40p">40% v. 60% Breite</div>
    <div class="col-60p">60% v. 60% Breite</div>
   </div>
  </div> 
  <div class="col-40p">
   <div class="grid-row">
    <div class="col-40p">40% v. 40% Breite</div>
    <div class="col-60p">60% v. 40% Breite</div>
   </div>      
  </div>
 </div>

Ein vollständiges und kommentiertes Beispiel finden in der folgenden ZIP- bzw. HTML-Datei:

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