如何将动态布局分散到多列中?

我要在三列上显示内容。每个内容都嵌套在一个框(div)中。每个盒子都有自己的动态高度(基于内容)。我的第一种方法是:

#boxes {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

.box {
  background-color: #000;
}
<div id="boxes">
  <div class="box" style="height: 900px"></div>
  <div class="box" style="height: 200px"></div>
  <div class="box" style="height: 500px"></div>
  <div class="box" style="height: 400px"></div>
  <div class="box" style="height: 900px"></div>
  <div class="box" style="height: 100px"></div>
  <div class="box" style="height: 500px"></div>
  <div class="box" style="height: 200px"></div>
  <div class="box" style="height: 700px"></div>
  <div class="box" style="height: 300px"></div>
</div>

如您所见,它确实将它们分为三列,但是它们之间有很多死角。 我正在尝试建立一种动态布局,以缩小框之间的距离。像这样:

enter image description here

评论
  • qquas
    qquas 回复

    Çiki siz oradafərqlifərqlipx vermisinizəgərbilirsinizsəbunu htmletiketindənyoxlayın