Bagaimana untuk Mengehadkan Bilangan Maksimum Lajur dalam Grid CSS Tanpa Pertanyaan Media?

Grid CSS: Menentukan Bilangan Maksimum Lajur Tanpa Pertanyaan Media

Grid CSS menyediakan pendekatan yang berkuasa untuk reka letak elemen web, tetapi kadangkala anda mungkin perlu menentukan maksimum bilangan lajur dalam grid anda sambil masih membenarkan elemen membalut ke baris baharu apabila lebar skrin berubah.

Untuk mencapai ini tanpa pertanyaan media atau JavaScript, pertimbangkan untuk menggunakan peraturan CSS berikut:

grid-template-columns: repeat(auto-fill, minmax(max(width, 100%/N), 1fr));

Di sini, N mewakili bilangan maksimum lajur yang anda mahu hadkan grid anda.

Maks(lebar, Bahagian 100%/N) memastikan bahawa setiap lajur akan mempunyai lebar minimum sama ada lebar bekas atau 100%/N (yang mana lebih besar). Konfigurasi ini berkesan mengehadkan bilangan lajur kepada N sambil membenarkan elemen membalut ke baris baharu apabila perlu.

Contohnya:

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

CSS ini akan membuat grid dengan maksimum 4 lajur, dengan setiap lajur mempunyai lebar minimum sama ada 200px atau 25% daripada lebar bekas.

Anda boleh melaraskan nilai --n untuk menukar bilangan maksimum lajur seperti yang diperlukan.

Penyelesaian ini menyediakan pendekatan yang fleksibel dan boleh disesuaikan untuk mencipta grid dengan bilangan lajur yang terhad sambil masih mengekalkan tindak balas merentas saiz skrin yang berbeza.

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