Bagaimanakah Saya Boleh Membuat Reka Letak Grid Square Responsif Menggunakan Grid CSS?

Membuat Reka Letak Grid Segi Empat dengan Grid CSS

Membuat susun atur segi empat sama, dengan empat segi empat sama dalam setiap baris, boleh dicapai menggunakan CSS Grid. Untuk memastikan bahawa segi empat sama mengekalkan bentuknya walaupun semasa mengubah saiz skrin, adalah penting untuk mengelak daripada menggunakan nilai tetap.

Kod Contoh

Kod berikut menunjukkan cara mencipta susun atur:

.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>

Penjelasan

• Elemen .container ditetapkan untuk memaparkan: grid dan menggunakan templat grid dengan empat lajur yang sama lebar.
• Sifat jurang grid menambah jurang 5px antara segi empat sama.
• Setiap segi empat sama, diwakili oleh pemilih div .container, mempunyai warna latar belakang merah.
• Sifat nisbah aspek, disokong oleh penyemak imbas moden, digunakan untuk mengekalkan 1:1 nisbah bidang untuk setiap segi empat sama, memastikan ia kekal segi empat sama tanpa mengira saiz atau orientasi skrin.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Reka Letak Grid Square Responsif Menggunakan Grid CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!