CSS-Grid-Layout formatieren mit JavaScript in CSS-Only
Veröffentlichungsdatum: 12. Mai 2022
Änderungsdatum: 08. August 2023
Projektgrundlage: BASE
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.
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)).