Grille CSS avec des lignes inégales (style Pinterest)

Question

J'essaie de créer une grille de liens à 3 colonnes et plusieurs lignes (img + texte). Le problème c'est que mes images n'ont pas la même hauteur, j'obtiens donc des résultats comme ceci :

J'essaie de trouver quelles propriétés de grille CSS sont nécessaires pour obtenir un résultat comme celui-ci.

J'ai simplement essayé de créer 3 divs (par colonne) contenant plusieurs liens, mais l'ordre n'était pas correct lors de la réponse.

Pouvez-vous aider ? Merci beaucoup.

Answer 1

Je pense que vous pouvez mettre display: flex dans le div parent Ensuite dans chaque colonne ajoutez le nombre d'images à restituer

<div class='parent'>
  <div class='column'>
    <img src='/img-1' />
    <img src='/img-4' />
    <img src='/img-7' />
  </div>
  <div class='column'>
    <img src='/img-2' />
    <img src='/img-5' />
    <img src='/img-8' />
  </div>
  <div class='column'>
    <img src='/img-3' />
    <img src='/img-6' />
    <img src='/img-9' />
  </div>
</div>

Maintenant, vous n'avez plus à vous soucier de la différence de hauteur de l'image.