➠ flexauto : affiche les blocs enfants dans une grille fluide et responsive DEMO
syntaxe : {up flexauto=x}contenu{/up flexauto} // x=1 à 6: nb colonnes sur grand écran.
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!