Grid CSS: Bagaimana untuk Menetapkan Kiraan Lajur Maksimum Tanpa Pertanyaan Media?

Grid CSS: Menentukan Bilangan Maksimum Lajur Tanpa Pertanyaan Media

Soalan:

Bolehkah kita menentukan grid CSS dengan bilangan lajur maksimum, sambil membenarkan elemen untuk dibalut secara dinamik kepada baharu baris apabila lebar skrin berubah?

Jawapan:

Ya, menggunakan Grid CSS, kita boleh mencapai ini tanpa menggunakan JavaScript atau pertanyaan media. Pendekatan ini menggunakan konsep lajur muat auto:

Penyelesaian:

1. Buat bekas grid dengan paparan: sifat grid.
2. Tetapkan sifat grid-template-columns menggunakan fungsi repeat() dengan auto-muat sebagai ulangan taip.
3. Dalam auto muat, gunakan minmax(maks(lebar, 100%/N), 1fr) untuk menentukan gelagat lajur.

Penjelasan:

• maks(lebar, 100%/N) memastikan bahawa lebar lajur akan sama ada lebar maksimum atau pecahan (100%/N) lebar bekas.
• 1fr menetapkan lebar lajur lalai menjadi 1 pecahan daripada ruang yang tinggal.

Akibatnya , apabila lebar bekas ditingkatkan, lajur akan mengembang untuk memuatkan ruang yang tersedia dalam bilangan maksimum lajur yang ditentukan. Elemen akan secara automatik membalut ke baris baharu seperti yang diperlukan.

Coretan Kod:

.grid-container {
  --n: 4; /* The maximum number of columns */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(200px, 100%/var(--n)), 1fr));
}

Contoh:

Dalam contoh berikut, bekas grid dibuat dengan maksimum 4 lajur dan elemen membalut sewajarnya:

<div>

Dengan pendekatan ini, kami boleh menentukan bilangan maksimum lajur dalam grid CSS, membenarkan elemen membalut ke baris baharu apabila lebar skrin berubah, tanpa memerlukan pertanyaan media.

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