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.