Des tuiles

Masonry est un script qui permet d’afficher des éléments sur plusieurs colonnes en préservant un ordre de lecteur horizontal. Le résultat est similaire à celui du site Pinterest.
pinterst

À l’heure actuelle Flexbox et les autres techniques ne permettent pas cette mise en page, on peut tricher avec des colonnes CSS mais l’ordre sera comme la lecture sur papier (le 2e élément est sous le 1er).
Dans un futur proche grid (grid sur css-tricks) devrait apporter un début de solution.
En attendant, il faudra passer par du JavaScript en utilisant le script suivant : http://masonry.desandro.com/.

Comment ça marche ?

Une fois le html chargé, le script calcule toutes les hauteurs des éléments puis replace les éléments avec des coordonnées x/y (position:absolute).
Un problème a souvent lieu sur les images sans attribut width et height car le script est généralement lancé avant de connaitre la taille des images, la solution est fournie sur le site.

See the Pen Masonry – imagesLoaded progress, vanilla JS by David DeSandro (@desandro) on CodePen.0

Si vous devez utiliser Masonry pour la première fois, il faudra partir d’un exemple et faire évoluer celui-ci petit à petit.

À savoir

Peut-on éviter Masonry ?

Faire des tuiles sans JavaScript est possible, mais il faudra préparer vos éléments « vignettes », un mal pour un bien. Profites-en pour faire des images sur mesure avec des icônes, des pictogrammes, un code couleur, un format adapté, des cadrages précis. Un autre avantage de la grille « manuelle » est sa performance d’affichage et de chargement.
Un article en 3 épisodes vous permet de faire ceci Portfolio responsive s01 – CSS grid.
Sinon, chez https://labs.jensimmons.com/

Des alternatives ?

J’ai souvent utilisé Salvattore, mais celui-ci semble très peu mis à jour.