Bagaimana untuk Membungkus Item Grid CSS tanpa Pertanyaan Media?

Pembungkusan Grid CSS tanpa Pertanyaan Media

Satu cabaran biasa dalam grid CSS ialah membungkus item agar sesuai dengan ruang yang tersedia. Dalam kes di mana pertanyaan media tidak diingini, pendekatan alternatif mesti digunakan.

Penyelesaian autoisi

Pertimbangkan untuk menggunakan varian notasi ulang(). Apabila dinyatakan sebagai nombor ulangan, autoisi mengira bilangan ulangan yang muat dalam ruang yang tersedia secara automatik tanpa menyebabkan limpahan.

Berikut ialah contoh:

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

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

Dengan autoisi, grid akan melaraskan kiraan lajurnya berdasarkan lebar yang tersedia, memastikan item dibalut dengan baik. Ini menghapuskan keperluan untuk menentukan lebar lajur tetap.

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