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