Bagaimana untuk Mencipta Susun Atur Grid 4 Lajur Responsif dengan Petak Sama Saiz Menggunakan Grid CSS?

Reka Letak Petak Grid CSS

Ingin mencipta reka letak grid yang terdiri daripada segi empat sama, dengan setiap baris mengandungi empat petak . Petak ini tidak berubah bentuk apabila saiz skrin berubah dan sentiasa mengekalkan lebar dan ketinggian yang sama (nilai tetap tidak diingini). Grid CSS diperlukan. Begini cara untuk melakukannya:

Menggunakan CSS, anda sentiasa boleh mengekalkan nisbah bidang 1:1 melalui unsur pseudo atau menggunakan nisbah aspek sifat baharu, contohnya:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 5px;
}
.container div {
  background-color: red;
  aspect-ratio: 1;
}

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

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Susun Atur Grid 4 Lajur Responsif dengan Petak Sama Saiz Menggunakan Grid CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!