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.

Note

There are two grid systems. You can use a simplified grid system based on Bootstrap v2, or the Flexgrid. In both cases, try not to mix grid classes with other module classes. Grid classes can be used on any parent/child contruction, not only on lists in the examples below.

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.

The Bootstrap v2 based grid system has a reduced functionality. Simple row span structures are possible. For more Information see Bootstrap v2 default grid system

@copyright

Teaser

Teasertext Mehr

@copyright

Teaser

Teasertext Mehr

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

Die Klasse grid--auto zusätzlich zur Klasse flexgrid teilt die Kinderelemente in gleicher Breite auf eine Zeile auf.

Die Klasse grid--default zusätzlich zur Klasse flexgrid teilt die Kinderelemente gleichmäßig in verschiedenen Breiten auf eine Zeile auf.

Content can be displayed in up to four columns with the flexgrid. The Flexgrid provides great flexibility, as it can be used in combination with almost any unit.

The classes grid--2, grid--3 and grid--4 in addition to the class flexgrid creates a two-, three- or four-column display.

The class grid--auto in addition to the class flexgrid slpits child elemnts evenly into one row.

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.

Merge columns

For division into columns with ratios ⅔ and ⅓ to be possible, the higher-level (parent) unit must have the class flexgrid grid--3. The child that should have ⅔ is then given the class 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.

Stretch inner elements to 100% height

If all units in the Flexgrid (child of every flexgrid element) should have the same height, the flexgrid should have the additional class grid--stretch. This especially makes sense if the child units have a colored background and give a more harmonious impression if they all have the same height.

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>