Grid
Das SOLO-Theme setzt auf die Erweiterung contao-grid-bundle, die du vor der Einrichtung des Themes installiert haben solltest. Sie ermöglicht es dir, die Grid CSS-Klassen des Themes zu verwenden.
Wichtig!
Die alte Version des SOLO Themes basierte noch auf floats und war an das Grid von Bootstrap angelehnt. Die aktuelle Version hingegen basiert nicht mehr auf Bootstrap (abgesehen von den Klassen-Namen).
Grid-Klassen
Eine 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.
Wenn Du die Breite des Browserfensters änderst, siehst du, wie sich die Inhalte neu ausrichten anhand der vorgegeben Breite.
.col-sm-4 .col-md-3
.col-sm-4 .col-md-3
.col-sm-4 .col-md-3
Abstände zwischen Spalten lassen sich erzeugen, indem ein Start-Wert ergänzt wird:
.col-sm-4 .col-md-3
.col-sm-4 .col-md-3
.col-sm-4 .col-md-3 .col-start-md-10
Eine weitere Besonderheit: Das Theme verwendet display: grid.
Dadurch lassen sich Inhalte in beiden Dimensionen anlegen, z. B. kann ein Element 3/12 breit aber 2 Reihen hoch sein.
.col-sm-4 .col-md-3 .row-span-md-2
.col-sm-4 .col-md-3
.col-sm-4 .col-md-3
.col-sm-4 .col-md-3
.col-sm-4 .col-md-3
.col-sm-4 .col-md-3
.col-sm-4 .col-md-3