CSS-Grid-Layout formatieren mit JavaScript in CSS-Only

In Weblication® kann über eigene Weblication® Techniken in Verbindung mit der BASE (Mobile First) JavaScript direkt in CSS eingebettet werden.

Hier kann man auch komplexeres jQuery nutzen, um damit dynamisch CSS-Variablen zu setzen, die wiederum z.B. ein CSS-Grid-Layout formatieren.

Das folgende Beispiel zeigt eindrücklich die Möglichkeiten, die diese Technik bietet.

CSS GRID LAYOUT

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut commodo pretium nisl.

Bild
Bild
Bild
Bild

Die Umsetzung nutzt einen mehrspaltigen Container mit fünf Spalten mit einer speziellen CSS-Only-Variante (gridDemo1). Die Bild-Elemente verwenden die Bild CSS-Only-Variante 215 ("Füllt den umschließenden Container aus") und die Inhaltsbox ist auf eine Höhe von 100% gesetzt.

Sie können diese Umsetzung ab CMS-Version 16 als Komponente fertig vorbereitet installieren (Komponente mit CSS-Grid-Layout (gridDemo1)).