Bagaimanakah cara saya meletakkan div/kad seperti ini?

Question

Saya menghadapi masalah meletakkan div seperti dalam foto.

<div class="cards" id="cards">
      <div class="container">
        <div class="single">
          <span class="dot"></span>
        </div>
        <div class="single">


          <span class="dot"></span>
        </div>
        <div class="second">
          <span class="dot"></span>
        </div>
        <div class="second">
          <span class="dot"></span>
        </div>
      </div>
    </div>

Saya telah mencuba sesuatu seperti ini tetapi saya menghadapi masalah untuk menggayakan dan meletakkannya menggunakan css.

Satu div dinamakan sempena dua kad/div pertama. Div kedua dinamakan kad kedua/div ke bawah.

Answer 1

Grid CSS boleh membantu anda dengan reka letak jenis ini. Kaji kod di bawah untuk melihat cara menyusun kotak berdasarkan model.

Pastikan anda melihat dengan lebih dekat bahagian berikut di MDN tentang 网格模板区域: Membiarkan Sel Grid Kosong

div {
  border: 1px solid black;
}
.strategy {
  grid-area: strategy;
}
.efficient {
  grid-area: efficient;
}
.fast {
  grid-area: fast;
}
.reliable {
  grid-area: reliable;
}
.wrapper {
  width: 500px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-template-areas:
    "fast efficient ." /* 3 cols: fast / efficient / . === empty col */
    ". strategy reliable";
}

<section class="wrapper">
  <div class="fast">Fast</div>
  <div class="efficient">Efficient</div>
  <div class="strategy">Strategy</div>
  <div class="reliable">Reliable</div>
</section>

Sumber: Panduan Lengkap untuk Grid CSS