行不均匀的 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>

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