javascript - 无论 html 中的顺序如何，如何解决 div 子项以覆盖剩余空间

Question

如提供的图像所示。我希望宽度为 20% 的最后一个 div 位于第二行的末尾。这怎么可能？这些所有卡片都是通过遍历来自 api 的数据呈现的

Answer 1

CSS-Grid 可以做到这一点:使用 grid-auto-flow: dense;

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 1em;
  grid-auto-flow: dense;
  padding: 1em;
  margin: 1em;
  border: 2px solid red;
}

.item {
  display: flex;
  place-items: center;
  place-content: center;
  height: 50px;
  border: 2px solid green;
}

.wide {
  grid-column: span 2;
}

<div class="container">
  <div class="item wide">40%</div>
  <div class="item wide">40%</div>
  <div class="item">20%</div>
  <div class="item wide">40%</div>
  <div class="item">20%</div>
  <div class="item">20%</div>
  <div class="item wide">40%</div>
  <div class="item">20%</div>
</div>