行不均勻的 CSS 網格（Pinterest 風格）

Question

我正在嘗試建立一個 3 列多行的連結網格（img 文字）。問題是我的圖像高度不一樣，所以我得到這樣的結果：

我正在嘗試尋找需要什麼 CSS 網格屬性才能獲得這樣的結果。

我嘗試只做 3 個 div（每列），其中包含多個鏈接，但響應時順序不正確。

你們能幫忙嗎？非常感謝。

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>

現在您不必擔心圖像高度不同。