如何删除gridview中不同大小之间的垂直空白？ [复制]

Question

我有不同高度的 div。我想将它们放在没有任何空白区域的网格中。请关注下方codesandbox。

.container {
      display: flex;
      flex-wrap: wrap;
      width: 400px;
    } 
    
    .sm {
      height: 200px;
      background: gold;
      border: 1px solid black;
      width: 45%; 
    }
    
    .md {
      height: 250px;
      background: red;
      border: 1px solid black;
      width: 45%;
    }

   <div class="container">
            <div class="sm"></div>
            <div class="md"></div>
            <div class="sm"></div>
            <div class="sm"></div>
            <div class="md"></div>
            <div class="sm"></div>
            <div class="sm"></div>
            <div class="md"></div>
        </div>

Answer 1

当不同的盒子有不同的高度时，你不能删除空白。要删除垂直空格，请为所有框使用相似的高度。

您为 .container * 使用了边距。这为容器内的所有元素设置了边距。要删除水平空白，请不要为 .container * 使用边距。

Answer 2

如果每个部分的高度不同，您将无法删除一个 div 中的空白。所以需要将各个部分进行如下划分。

.container {
  display: flex;
  width: 400px;
}

.items {
  display: flex;
  flex-direction: column;
  width: 45%;
}

.sm {
  height: 200px;
  background: gold;
  border: 1px solid black;
  width: 100%; 
}

.md {
  height: 250px;
  background: red;
  border: 1px solid black;
  width: 100%;
}

<div class="container">
  <div class="items">
    <div class="sm"></div>
    <div class="sm"></div>
    <div class="md"></div>
    <div class="sm"></div>
  </div>
  <div class="items">
    <div class="md"></div>
    <div class="sm"></div>
    <div class="sm"></div>
    <div class="md"></div>
  </div>
</div>