Grid
Das SOLO-Theme setzt auf die Erweiterung [euf_grid], die du vor der Einrichtung des Themes installiert haben solltest. Sie ermöglicht es dir, die Grid CSS-Klassen des Themes zu verwenden.
Grid-Klassen
Die Besonderheit bei diesem Grid: Du kannst für jeden Viewport eine individuelle Breite festlegen. Grid Klassen sind nach dem Schema .col-[viewport]-[cols]
aufgebaut. Es gibt standardmäßig 5 Viewports xs
, sm
, md
, lg
und xl
, sowie für die Größe die Werte von 1
-12
.
Die Funktionsweise des Grids ist schnell erklärt. Jedes Element .col-
, das im Grid angeordnet werden soll bekommt links und rechts ein Padding (Standard:0.9375rem) zugewiesen. Der umschießende Container .row
hat eine Breite von 100% + Padding (2 x 0.9375rem), wodurch das erste und letzte Element bündig mit den anderen Inhalten dargestellt wird.
.col-sm-4 .col-md-3
.col-sm-4 .col-md-3
.col-sm-4 .col-md-3
Im Aufbau und in der Funktion ist das Grid an das Bootstrap-Grid angelehnt. Weitere Beispiele findest du auch auf der Bootstrap-Website und in der Beschreibung der Grid-Erweiterung.