与css网格的砌体布局

Question

我正在尝试使用css网格布局创建砌体布局.网格中的所有项目都具有可变高度.我不知道会有什么东西.所以我不能grid-row为每个项目定义.是否可以在列中的上一个结尾之后立即启动每个新项目？

代码我正在尝试:

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, 330px);
  align-items: flex-start;
  grid-column-gap: 10px;
  grid-row-gap: 50px;
}

.item {
  background: black;
  border-radius: 5px;
}

<div class="wrapper">
  <div class="item" style="height:50px"></div>
  <div class="item" style="height:100px"></div>
  <div class="item" style="height:30px"></div>
  <div class="item" style="height:90px"></div>
  <div class="item" style="height:80px"></div>
  <div class="item" style="height:50px"></div>
  <div class="item" style="height:70px"></div>
  <div class="item" style="height:40px"></div>

</div>

完整的codepen在这里

Answer 1

您可以使用 来完成此操作column。

.wrapper {
    column-gap: 10px;
    column-count: 4;
}

.item {
    display: inline-block;
    background: #000;
    width: 100%;
    border-radius: 3px;
}

看起来您正在尝试使用flex和的组合grid，这可能会造成混乱。据我所知，flex 是相对于页面上的其余项目而言的，其中设置列会影响落入这些列的项目。

更新的代码笔