Grid
Das LASR-Theme setzt auf das contao-grid-bundle, die bei der Installation des Themes mitinstalliert wird. 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.
Das Grid-System basiert bei LASR auf dem CSS Grid Layout. Solltest du noch keine oder wenig Erfahrung im Umgang mit Grid Layout haben, dann empfehle ich dir https://gridbyexample.com/ von Rachel Andrew.
Beispiele
Nachfolgend findest du ein paar Beispiel, um die grundsätzliche Funktionsweise von CSS Grid Layout besser zu verstehen:
Unterschiedliche Breiten bei unterschiedlichen Viewports
.col-sm-4 .col-md-3
.col-sm-4 .col-md-3
.col-sm-4 .col-md-3
Abstand zwischen zwei Spalten erzeugen
.col-md-5
.col-md-6 .col-start-md-7