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.
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