Bagaimana untuk Mencipta Susun Atur Grid CSS Responsif Petak Sama Saiz?

Reka Letak Petak Grid CSS

Soalan ini meneroka selok-belok mencipta reka letak grid CSS yang terdiri daripada segi empat sama, di mana setiap segi empat sama mengekalkan nisbah aspeknya semasa mengubah saiz skrin.

Melaksanakan Reka letak

Untuk mencapai reka letak ini, pertimbangkan kod CSS berikut:

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

Memahami Kod

• paparan: grid;: Mengaktifkan reka letak grid untuk elemen kontena.
• grid-template-columns: 1fr 1fr 1fr 1fr;: Mentakrifkan grid dengan empat lajur yang sama lebar (1fr = satu pecahan ruang yang tersedia).
• jurang grid: 5px;: Menetapkan jurang 5 piksel antara sel grid.
• warna latar belakang: merah;: Menggayakan sel grid dengan warna merah latar belakang.
• nisbah bidang: 1;: Mengekalkan nisbah bidang setiap sel sebagai 1:1. Sifat ini memastikan bahawa segi empat sama kekal berbentuk segi empat sama tanpa mengira saiz skrin.

Pendekatan ini membolehkan anda membuat grid segi empat sama yang mengekalkan nisbah bidang semasa mengubah saiz, memberikan reka letak yang fleksibel dan responsif.

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