Bagaimana untuk mencapai pembungkusan grid dalam CSS tanpa pertanyaan media?

Pembungkusan Grid dengan CSS dan Isi Auto

Mencapai pembungkusan grid dalam CSS tanpa bergantung pada pertanyaan media boleh dilakukan melalui penggunaan auto- isikan notasi repeat(). Coretan kod dalam soalan asal menunjukkan grid dengan lebar lajur yang jelas, tetapi untuk membenarkan item mentakrifkan lebarnya sendiri, kami boleh mengubah suainya seperti berikut:

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

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

AutoIsi

Autoisi, seperti yang ditakrifkan dalam spesifikasi Reka Letak Grid CSS, memastikan bilangan ulangan dalam tatatanda repeat() ialah nilai terbesar yang mungkin tanpa menyebabkan grid melimpah bekasnya. Ini membolehkan grid melaraskan bilangan lajur secara dinamik berdasarkan lebar itemnya.

Dalam kes kami, kami menentukan autoisi sebagai nombor ulangan dan kandungan min sebagai saiz tetap untuk setiap lajur. Kandungan min memastikan setiap lajur bersaiz sesuai dengan kandungannya, membolehkan item menentukan lebarnya sendiri.

Hasilnya ialah grid yang akan membalut itemnya tanpa memerlukan pertanyaan media, dengan berkesan menjarakkannya dengan baik walaupun dengan bilangan item yang tidak pasti.

Atas ialah kandungan terperinci Bagaimana untuk mencapai pembungkusan grid dalam CSS tanpa pertanyaan media?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!