[euf_grid]

Lege individuelle Spaltenbreiten für jede Bildschirmgröße separat an und erstelle so noch individuellere Layouts.

Installation der Erweiterung

Die Erweiterung wird wahlweise über die Paketverwaltung / den Contao Manager oder das Extension Repository angeboten.

Nach der Installation stehen Dir 4 neue Inhaltselemente und 2 neue Felder für die Eingabe von Grid-Klassen und weiteren Optionen zur Verfügung:

Inhaltselemente:

Reihe Start
Reihe Ende
Spalte Start
Spalte Ende

Felder:

Grid Columns
Grid Optionen

CSS für Grid-Darstellung

Die Grid-Erweiterung wurde ursprünglich für das Zusammenspiel mit dem Nutshell Framework entwickelt und bringt deshalb nur eine sehr rudimentäre CSS-Datei mit Grid-Klassen mit. Du kannst sie über das Seitenlayout aktivieren. Wir empfehlen dir aber, auf lange Sicht mit einer eigenen CSS-Datei mit Grid-Klassen zu arbeiten.

Neu: Seit Version 2.0 kann eine CSS-Datei mit den dazugehörigen Grid-Klassen direkt über das Seitenlayout hinzugefügt werden.

Verwendung der Erweiterung

Die Verwendung der Grid-Klassen und ihre Benennung orientiert sich an dem Bootstrap Grid aus Version 4 und wurde durch eigene Klassen ergänzt. Die Klassen kannst du über die beiden neuen Felder Grid Columns und Grid Optionen einsehen und hinzufügen.

Damit die Spaltenberechnung korrekt funktioniert, müssen die Elemente immer innerhalb einer Reihe (.row) platziert sein. Hier ein Beispiel für den HTML-Code, der bei korrekter Verwendung erzeugt wird:

<div class="row ce_rowStart first">
  <div class="col-sm-6">
    <div class="ce_text block">
      <h2>Überschrift</h2>
      <p>Beispiel-Text</p> 
    </div>
  </div>
  <div class="col-sm-3">
    <div class="ce_text block">
      <h2>Überschrift 2</h2>
      <p>Beispiel-Text</p> 
    </div>
  </div>  
  <div class="col-sm-3">
    <div class="ce_text block">
      <h2>Überschrift 3</h2>
      <p>Beispiel-Text</p> 
    </div>
  </div>
</div>

Falls du nicht mit dem Bootstrap Grid vertraut bist:

Die mitgelieferten Grid-Klassen aus der Erweiterung oder dem Nutshell Framework sind nach dem „Mobile First“-Ansatz aufgebaut. Ein Element, das keine Klasse zugewiesen bekommt, ist standardmäßig 100% breit. Über das Hinzufügen von Klassen beispielsweise .col-xs-8 gibst du dem Element eine maximale Breite von 8 in einem 12-spaltigen Layout. Das Kürzel xs bezieht sich dabei auf die Bildschirmbreite, die standardmäßig von xs bis xl geht.

Die Bildschirmbreite xs umfasst alle Geräte von 0 bis 550 Pixel (34.375em). Wenn du keine weiteren Klassen hinzufügst, wird die Breite von 8/12 für alle anderen Bildschirmgrößen ebenfalls verwendet. Ergänzt du das Element um eine weitere Klasse, beispielsweise .col-sm-6, so wird das Element ab einer Bildschirmbreite von 551 Pixel nur noch mit 6/12 Breite dargestellt.

Kurzfassung:

Mobile First Ansatz
5 Viewports: xs, sm, md, lg, xl
.col-xs-8 = 8/12 Breite in einem Grid-Layout
.col-xs-8 .col-sm-6 = 8/12 Breite bis 550Pixel, ab 551 Pixel 6/12 Breite