如何利用css3纵横比开发响应网格图库

Question

​

如何创建响应网格库。请检查附呈的图像

   <div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
  <div>Eight</div>
  <div>Nine</div>
  <div>Ten</div>
  <div>Eleven</div>
  <div>Twelve</div>
  </div>

Answer 1

鉴于您的所有元素都具有相同的宽度，我建议您使用具有列方向和固定容器大小的flex：

​

.container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    gap: 5px;
    height: 180px;

}

.big-box {
    height: 100px;
    width: 100px;
    border: 5px solid rgb(48, 48, 48);
}
.small-box {
    height: 50px;
    width: 100px;
    border: 5px solid rgb(48, 48, 48);
}

        <div class="container">
            <div class="big-box"></div>
            <div class="small-box"></div>
            <div class="small-box"></div>
            <div class="big-box"></div>
            <div class="big-box"></div>
            <div class="small-box"></div>
            <div class="small-box"></div>
            <div class="big-box"></div>
        </div>

​