Gridsystem

Das Gridsystem ist die Basis des Frameworks. Es hilft, Inhalte so zu zeigen, wie wir es gerne möchten. Am einfachsten ist die Vorstellung von der Funktion des Grids, wenn man sich die Linien in einem Mathematikheft vorstellt. Die Linien und Strukturen dort können Ordnung geben, wenn man etwas zeichnen möchte.
Ein Grid ist zwar etwas weniger flexibel, funktioniert im Grunde aber gleich. Es bildet den Rahmen für eine Internetseite und macht es einfach, Inhalte korrekt zu positionieren.
Um den Umgang mit dem Grid möglichst leicht zu machen, ist es auf eine geringere Anzahl an Klassen reduziert. monkeygrids bietet die Möglichkeit die Breite mit den geläufigsten Brüchen zu unterteilen. Es stehen zur Wahl:

  • col-1-1 (ganze Breite)
  • col-1-2 (50% Breite)
  • col-1-3 und col-2-3 (33% und 66% Breite)
  • col-1-4 und col-3-4 (25% und 75% Breite)

Umschlossen werden die Zellen immer von einem container-Div und einer row-Div. Diese sorgen für ausreichende Abstände zu den Seiten und zwischen den einzelnen Zellen, wie es auch bei dem Beispiel hier zu sehen ist.

Beispiel

<div class="container">
    <div class="row">
        <div class="col-1-1">col-1-1</div>
    </div>
    <div class="row">
        <div class="col-1-2">col-1-2</div>
        <div class="col-1-2">col-1-2</div>
    </div>
    <div class="row">
        <div class="col-1-3">col-1-3</div>
        <div class="col-2-3">col-2-3</div>
    </div>
    <div class="row">
        <div class="col-1-4">col-1-4</div>
        <div class="col-3-4">col-3-4</div>
    </div>
    <div class="row">
        <div class="col-1-4">col-1-4</div>
        <div class="col-1-2">col-1-2</div>
        <div class="col-1-4">col-1-4</div>
    </div>
</div>