Grid
Das LASR-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
.
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