••
< if title: />

D20: css only Masonry w/ flexbox

projet : web experiments ← du lundi 26 octobre 2020
< if content: />

Warning: count(): Parameter must be an array or an object that implements Countable in /homepages/32/d342591868/htdocs/quentinrenaux/wp-content/plugins/user-specific-content/User-Specific-Content.php on line 373

Jour 20, On va parler de Masonry, masonry pour le vulgariser c'est une library javascript qui à servi plein de sites comme Pinterest à mettre en place des "murs" de photos et d'images, un peu comme des briques.

On avait absolument besoin de javascript pour permettre aux images de bien s'emboiter, et on pourrait encore en avoir besoin aujourd'hui!

sans masonry
avec masonry

Mais alors si on veut le faire uniquement en CSS on peut ?
Et bien oui ! en se penchant sur la fonction Flexbox et ses colonnes (column).

Voici un Masonry composé uniquement de css avec mes photographies instagram et le tout posté pour la premiere fois sur Codepen (un site communautaire d'échange de code)

Le résultat ici → codepen.io/quentindigital/full/KKzmXQd

< if thumbnail: />