CSS-Raster mit ungleichmäßigen Reihen (Pinterest-Stil)

Question

Ich versuche, ein 3-spaltiges, mehrzeiliges Linkraster zu erstellen (Bild + Text). Das Problem ist, dass meine Bilder nicht die gleiche Höhe haben, daher erhalte ich Ergebnisse wie dieses:

Ich versuche herauszufinden, welche CSS-Rastereigenschaften erforderlich sind, um ein Ergebnis wie dieses zu erhalten.

Ich habe versucht, nur 3 Divs (pro Spalte) mit mehreren Links darin zu erstellen, aber die Reihenfolge war bei der Antwort nicht korrekt.

Können Sie helfen? Vielen Dank.

Answer 1

我想，你可以将 display: flex 放到父 div 中 然后在每列中添加要渲染的图像数量

<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>

现在您不必担心图像高度不同。