Bagaimana untuk Mencapai Pembungkusan Grid CSS tanpa Pertanyaan Media menggunakan isian automatik atau muat automatik?

Menggunakan isian automatik Grid CSS atau muat auto untuk Membungkus tanpa Pertanyaan Media

Dalam grid CSS, pembungkusan automatik tanpa pertanyaan media boleh dicapai dengan menggunakan kata kunci autoisi atau muat auto dalam tatatanda repeat() dalam lajur-templat-grid atau baris-templat-grid.

Autoisi

Kata kunci isian automatik mentakrifkan bilangan sel grid untuk mengisi ruang bekas yang tersedia. Ia akan melaraskan bilangan lajur secara automatik agar sesuai dengan saiz bekas tanpa melimpah.

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

Dalam contoh ini, sifat grid-template-columns menentukan bahawa grid harus mengisi lebarnya secara automatik dengan sebanyak 186px lebar. lajur yang mungkin.

Automuat

Kata kunci automuat berkelakuan serupa dengan autoisi, tetapi ia melaraskan saiz lajur agar sesuai dengan ruang yang tersedia bukannya bilangan lajur.

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

Dalam contoh ini, sifat grid-template-columns menentukan bahawa grid harus secara automatik memuatkan sebanyak mungkin lajur ke dalam ruang yang tersedia, dengan setiap lajur mempunyai minimum lebar 186px dan lebar maksimum automatik.

Teknik ini membolehkan anda membuat grid CSS yang membungkus kandungannya tanpa memerlukan pertanyaan media, melaraskan secara dinamik pada ruang yang tersedia.

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