Bagaimana untuk Mencapai Pembungkusan Grid CSS Tanpa Pertanyaan Media?

Mencapai Pembungkusan Grid CSS Tanpa Pertanyaan Media

Dalam bidang grid CSS, mencapai kesan pembalut yang diingini tanpa menggunakan pertanyaan media boleh cabaran bersama. Mari kita mendalami penyelesaian yang menggunakan notasi repeat() dengan autoisi untuk mencapai matlamat yang sukar difahami ini.

Merombak Pendekatan dengan ulang(autoisi)

Daripada menyatakan secara eksplisit lebar item grid melalui grid-template-lajur, kita boleh menggunakan notasi repeat() dengan auto-isi sebagai nombor ulangan. Autoisi secara dinamik mengira bilangan maksimum lajur yang boleh dimuatkan dalam bekas grid tanpa melimpah.

Menjelaskan autoisi

Varian autoisi ulangan () menentukan bilangan ulangan berdasarkan prinsip berikut: jika bekas grid mempunyai saiz yang dipratentukan atau maksimum dalam paksi yang berkaitan, bilangan lajur akan sepadan dengan integer positif tertinggi yang tidak menyebabkan grid melangkaui bekasnya.

Sampel Pelaksanaan

Untuk menunjukkan kuasa autoisi, mari kita tingkatkan coretan kod awal:

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, 186px);
}

.grid > * {
  background-color: green;
  height: 200px;
}

Dengan pelarasan ini, kami item grid akan melaraskan lebarnya secara dinamik untuk menampung ruang yang tersedia, membalut dengan lancar ke baris baharu mengikut keperluan.

Nota tentang Fleksibiliti Lebar Item

Selain itu, autoisi membolehkan untuk kanak-kanak menentukan lebar mereka sendiri, menghapuskan keperluan untuk lebar berkod keras. Pendekatan ini meningkatkan fleksibiliti dan responsif reka letak grid.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Pembungkusan Grid CSS Tanpa Pertanyaan Media?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!