Grids

Hinweis

Es gibt zwei Gridsysteme. Sie können ein vereinfachtes Gridsystem basierend auf Bootstrap v2 nutzen, oder das Flexgrid. In beiden Fällen sollten die Gridklassen nicht mit anderen Modulklassen gemischt werden. Gridklassen können auf jedes Eltern/Kind Element angewendet werden, nicht nur auf Listen wie in den folgenden Beispielen.

1) Bootstrap based grid

Das auf Bootstrap v2 basierte Gridsystem ist in den Funktionen reduziert. Einfache row span Gebilde sind hier möglich. Für mehr Informationen siehe Bootstrap v2 default grid system.

Alternative Bildbeschreibung

@copyright

Teaser

Teasertext Mehr

Alternative Bildbeschreibung

@copyright

Teaser

Teasertext Mehr

Alternative Bildbeschreibung

@copyright

Teaser

Teasertext Mehr 

<div class="row ">
        <div class="span4">
        <!-- place content here -->        </div>
        <div class="span4">
        <!-- place content here -->        </div>
        <div class="span4">
        <!-- place content here -->        </div>
</div>

2) Flexgrid

Mithilfe des flexgrid lassen sich Inhalte in bis zu vier Spalten darstellen. Das Flexgrid kann in Kombination mit nahezu allen Einheiten verwendet werden und ermöglicht so eine hohe Flexibilität.

Die Klassen grid--2, grid--3 und grid--4 zusätzlich zur Klasse flexgrid ermöglicht eine zwei-, drei- oder vierspaltige Darstellung.

Hinweis: Alle Kinderelemente erhalten dieselbe Spaltenbreite. Mit der Klasse .nogrid auf dem Kinderelement lässt sich das Raster aber in Ausnahmefällen unterbrechen.

.flexgrid.grid--2

  • Spalte 1: Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.
  • Spalte 2: Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. 
<ul class="flexgrid grid--2">
         <li>
        Spalte 1: Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.        </li>
         <li>
        Spalte 2: Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.        </li>
</ul>

.flexgrid.grid--3

  • Spalte 1: Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.
  • Spalte 2: Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.
  • Spalte 3: Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. 
<ul class="flexgrid grid--3">
         <li>
        Spalte 1: Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.        </li>
         <li>
        Spalte 2: Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.        </li>
         <li>
        Spalte 3: Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.        </li>
</ul>

.flexgrid.grid--4

  • Spalte 1: Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.
  • Spalte 2: Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.
  • Spalte 3: Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.
  • Spalte 4: Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. 
<ul class="flexgrid grid--4">
         <li>
        Spalte 1: Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.        </li>
         <li>
        Spalte 2: Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.        </li>
         <li>
        Spalte 3: Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.        </li>
         <li>
        Spalte 4: Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.        </li>
</ul>

Spalten verbinden

Um eine Aufteilung der Spalten im Verhältnis ⅔ und ⅓ zu erhalten, benötigt die Elterneinheit die Klasse flexgrid grid--3. Das Kind, welches die ⅔ einnehmen soll erhält dann die Klasse span2.

  • Spalte 1: Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.
  • Spalte 2: Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.
<ul class="flexgrid grid--3">
         <li class="span2">
            <div class="panel--light">Spalte 1: Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.</div>        </li>
         <li>
            <div class="panel--light">Spalte 2: Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.</div>        </li>
</ul>

Elemente auf 100% Höhe dehnen

Sollen alle Einheiten im Flexgrid (Kind innerhalb jedes Flexgridelements) die gleiche Höhe haben, benötigt das flexgrid zusätzlich die Klasse grid--stretch. Dies ist insbesondere dann sinnvoll, wenn die Kindeinheiten einen gefärbten Hintergrund haben und dadurch bei gleicher Höhe harmonischer wirken.

  • Spalte 1: Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.
  • Spalte 2: Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.
  • Spalte 3: Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.
<ul class="flexgrid grid--3 grid--stretch">
         <li>
            <div class="panel--heavy">Spalte 1: Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.</div>        </li>
         <li>
            <div class="panel--heavy">Spalte 2: Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.</div>        </li>
         <li>
            <div class="panel--heavy">Spalte 3: Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.</div>        </li>
</ul>