Idéal pour répartir des blocs sur plusieurs colonnes "responsives"
author Lomart version 1.0 - juillet 2017
- flexauto=3: nombre de colonnes sur grand écran
- tablet=2: nombre de colonnes sur moyen écran
- mobile=1: nombre de colonnes sur petit écran
- class: classe(s) ajoutée(s) au bloc parent
- style: style inline ajouté au bloc parent
Redimensionner votre navigateur pour voir l'effet responsive
Pour obtenir la grille ci-dessous, ce simple code convient:
{up flexauto}
<p>bloc n°1</p>
<div>bloc n°2</div>
<h4>bloc n°3</h4>
<p>bloc n°4</p>
<p>bloc n°5</p>
<p>bloc n°6</p>
{/up flexauto}
bloc n°1
bloc n°2
bloc n°3
bloc n°4
bloc n°5
bloc n°6
Vous remarquerez la tolérance pour définir les blocs enfants. N'importe quel type de bloc convient tant qu'il est de premier niveau
Par défaut, le nombre de colonnes est de 3 sur grand écran, 2 sur moyen et 1 sur petit.
L'exemple ci-dessous montre comment modifier ce comportement. Il ajoute aussi une marge entre les cellules avec la classe fg-gap. Toutes les classes de UP-Flexgrid sont utilisables
{up flexauto=6 | tablet=3 | mobile=2 | class=fg-gap}bloc n°1
bloc n°2
bloc n°3
bloc n°4
bloc n°5
bloc n°6
Si le comportement de la grille n'est pas celui attendu, c'est presque toujours à cause des règles css que vous avez ajoutées.
Afin d'éviter d'alourdir les shortcodes, j'ai utilisé l'action addcsshead pour définir les règles CSS d'habillage.
{up addcsshead=
.fg-row > *:nth-child(odd) [background-color:violet]
.fg-row > *:nth-child(even) [background-color:tan]
.fg-row > * [padding:5px;margin-bottom:0;border:#666 dotted 2px;text-align:center]
}notez que UP admet et comprend des arguments sur plusieurs lignes. Pratique pour se relire!