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

Reka Letak Petak Berasaskan Grid CSS

Soalan ini meneroka penciptaan susun atur grid CSS yang terdiri daripada segi empat sama yang mengekalkan dimensinya tanpa mengira skrin saiz. Ia memerlukan penggunaan Grid CSS dan melarang dimensi nilai tetap.

Penyelesaian:

Anda boleh mencapai ini menggunakan sifat nisbah aspek:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 5px;
}

.container div {
  background-color: red;
  aspect-ratio: 1;
}

Sifat nisbah bidang memastikan bahawa lebar dan tinggi segi empat sama sentiasa kekal dalam nisbah 1:1, mengekalkan segi empat samanya bentuk.

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