flexbox, masonry & grid ~ Mise en page Bento box

Les étapes

Une règle de base quand on utilise plusieurs actions simultanément : procéder action par action

Les box

Pour organiser du contenu, il faut déjà avoir des éléments à mettre dans les cases. 
Pour cela, j'utilise l'action box qui permet de structurer ses différentes parties : titre, sous-titre, image, texte, bouton action ainsi que le style.

{up box=onimage
| image=images/photos/4/1.jpg
| title=Le titre
| subtitle=et son sous-titre
| action=Découvrir
| link=#
| head-class=bg-80 t-brun}

{up box=onimage
| image=images/photos/4/2.jpg
| title=Perroquets
| action=Découvrir
| link=#
| head-class=bg-80
| title-link-class=t-vertFonce
| action-link-style=bg-vertFonce}

{up box=onimage
| image=images/photos/4/3.jpg
| title=Pingouins
| action=Découvrir
| link=#
| head-class=bg-80
| title-link-class=t-bleuClair
| action-link-style=bg-bleuClair; border-radius:50%; text-shadow:2px 1px 2px #333; font-weight:bolder}
{up lorem=1 | max-word=15 | class=t-grisFonce}
{/up box}

{up box=onimage-card | style=min-height:400px
| image=images/photos/4/4.jpg
| title=Lion majestueux
| action=Découvrir
| link=#
| head-class=background:#A0522D
| title-link-class=t-blanc}

Je vais utiliser les quatre box dans les différents essais de mise en forme. Je ne répèterai pas les shortcodes pour alléger la démonstration et mettre en évidence les codes de mise en page.

La mise en page par masonry

L'action masonry et son assemblage par brique donne l'impression d'une mise en page bento. 

{up masonry=480:1,760:2,960:3 | margin=10}

Les plus

• la taille des boîtes s'adapte au contenu 
• On peut ajouter ou supprimer des boites facilement

Les moins

• l'ensemble ne forme pas un rectangle

La mise en page par flexbox

Pour la mise en page, utilisons l'action flexbox et sa nouvelle option alternate.

Cette option inverse à chaque ligne la largeur des blocs qui la compose. Par exemple : pour une valeur de flexbox=8-4,  les blocs de la première ligne feront 8/12 et 4/12 et ceux de la deuxième ligne 4/12 et 8/12. On recommence cette alternance pour les lignes suivantes.

{up flexbox=8-4 | tablet=7-5 | mobile=12 | alternate | css-head=#id>*>*=height:100%}

Les plus

• On peut ajouter ou supprimer des boites facilement à condition d'avoir toujours un multiple de nombre par ligne.

Les moins

• toutes les lignes suivent la même présentation

La mise en page par grid

La nouvelle action grid permet de dessiner l'agencement de boîtes.

{up grid='d4 d4 d4 b2 b2 b2 b2'
         'd4 d4 d4 c3 c3 a1 a1' 
         'd4 d4 d4 c3 c3 a1 a1'
| grid-template-columns=repeat(7,1fr)
| grid-template-rows=auto
| zone-name=a1,c3,b2,d4
| mobile-grid='a1' 'b2' 'c3' 'd4'
| mobile-grid-template-columns=1fr
| css-head=#id>div>div[height:100%]
}

Notez que pour faciliter l'imbrication, j'ai positionné le bloc vertical (d4) en premier. 
L'option css-head force la hauteur du contenu de toutes les cellules.

Les plus

• une grille totalement personnalisée

Les moins

• rédaction du shortcode moins intuitive