Grouper des cellules flexauto

Le résultat ci-dessus est obtenu avec ce shortcode ;

{up flexauto=4 | tablet=2 | mobile=1 
  | bloc-style=bd-gris;bg-blanc;tc 
  | css-head=#id > *[up-center;p2]#id p[m0]
     {up mq=#id .up-col-1.up-row-1,#id .item-5
       | default=width:calc(100%/2 - 1rem); background:lightblue !important
       | tablet=width:calc(100%/1 - 1rem); background:plum !important
       | mobile=width:calc(100%/1 - 1rem);background:lightgreen !important
     }
}
UN
{======= 2}
DEUX
{======= 3}
TROIS
{======= 4}
QUATRE
{======= 5}
CINQ
{======= 6}
SIX
{======= 7}
SEPT
{======= 8}
HUIT
{/up flexauto}

Étudions les options de l'action flexauto.

• Nous définissons 4 colonnes sur grand écran, 2 sur tablette et 1 sur mobile
• l'option bloc-style permet d'agrémenter le résultat.
  Depuis la version 5.2, il est possible de passer des class2style pour des options qui attendent des styles. N'oubliez pas les points-virgules pour les séparer.
• la fusion des cellules est définie dans l'option css-head. 
  
  • la première règle centre le contenu des cellules et supprime les marges autour des balises p
  • le groupement des cellules sont définies à l'aide de la nouvelle action mq.
    • Pour la démo, j'utilise les 2 méthodes pour cibler une cellule
      • à l'intersection de la première colonne et de la première ligne
      • par sa classe : item- suivie de la position de la cellule
    • pour les 3 tailles d'écran, on modifie la largeur des cellules par rapport à la largeur totale.
      • sur grand écran (par défaut), les cellules occupent le double des autres cellules, soit 4 / 2 = 2
      • dans les autres cas, les cellules occupent la largeur du bloc
    • les "- 1rem" permettent de prendre en compte l'espace entre les cellules
    • pour la démo, je modifie la couleur de ces cellules 

Voilà, c'est tout. Il suffit de suivre cet exemple !