Standard

Setzen Sie die ein Container-Element mit der CSS-Klasse "grid-row" pro Reihe und "col-20p", "col-40p", "col-60p", "col-80p", "col-100p" für die Elemente innerhalb der Reihe. Die Zahlen in den Klassenbezeichnern stehen für die prozentuale Breiten-Werte innerhalb der Reihe. Addiert man die Breitenangaben aller Elemente innerhalb der Reihe sollten 100% heraus kommen. Die Anordnung der Spalten beginnt immer links und geht nach rechts und nach einem Zeilenumbruch wieder links, sobald, von oben aus betrachtet, Platz für die Spalte ist und so weiter.

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

 <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>

Besonderheit: Abstände der Spalten nach links und rechts

Um Links- oder Rechtsränder abzubilden, können weitere CSS-Klassen für die jeweiligen Spalten vergeben werden: "lm-20p", "lm-40p", "lm-60p", "lm-80p" für die Linksränder und "rm-20p", "rm-40p", "rm-60p", "rm-80p" für die Rechtsränder.

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

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

 <div class="grid-row">
  <div class="col-20p rm-20p">20% Breite + 20% Rechtsrand</div>
  <div class="col-40p rm-20p">40% Breite + 20% Rechtsrand</div>
 </div>

Besonderheit: Spalten innerhalb von Spalten

Um Spalten innerhalb von Spalten zu realisieren, definieren Sie innerhalb der jeweiligen Spalten abermals ein Containerelement mit der CSS-Klasse "grid-row" und setzen darin wie gehabt die Elemente mit den gewünschten CSS-Klassen.

20% Breite
60% Breite
20% Breite
40% v. 60% Breite
60% v. 60% Breite
40% v. 40% Breite
60% v. 40% Breite
20% Breite
60% Breite
20% 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">
   <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> 

 <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>