Grid CSS dengan baris tidak rata (gaya Pinterest)

Question

Saya cuba mencipta 3 lajur grid berbilang baris pautan (img + teks). Masalahnya ialah imej saya tidak sama ketinggian, jadi saya mendapat hasil seperti ini:

Saya cuba mencari sifat grid CSS yang diperlukan untuk mendapatkan hasil seperti ini.

Saya cuba hanya membuat 3 div (setiap lajur) dengan berbilang pautan di dalamnya, tetapi susunannya tidak betul semasa membalas.

Bolehkah anda membantu? Terima kasih banyak-banyak.

Answer 1

Saya rasa, anda boleh meletakkan display: flex di dalam div induk Kemudian dalam setiap lajur tambahkan bilangan imej untuk dipaparkan

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

Kini anda tidak perlu risau tentang ketinggian imej yang berbeza.