[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
![EUF Grid](files/content/ressourcen/dokumentationen/erweiterungen/euf_grid/euf_grid-1.jpg)
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.
![EUF Grid](files/content/ressourcen/dokumentationen/erweiterungen/euf_grid/euf_grid-2.jpg)
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