Bagaimanakah Saya Boleh Menetapkan Bilangan Maksimum Lajur dalam Grid CSS tanpa Menggunakan Pertanyaan Media?

Bilangan Maksimum Lajur dalam Grid CSS tanpa Pertanyaan Media

Mentakrifkan Kiraan Lajur Maksimum Grid

Adakah layak untuk menentukan grid dengan set maksimum bilangan lajur sambil membenarkan elemen pecah ke baris baharu apabila saiz port pandang berubah? Secara lalai, grid membenarkan lajur berkembang tanpa had, yang boleh menyebabkan reka letak yang tidak diingini pada skrin yang lebih sempit.

Mencapai Grid dengan Kiraan Lajur Maksimum

Untuk menangani perkara ini, Grid CSS memperkenalkan konsep penggunaan max() dalam sifat grid-template-columns. Fungsi max() menerima dua parameter: yang pertama mewakili lebar maksimum satu lajur dan yang kedua memastikan setiap lajur kekal responsif dalam bekas induknya.

Pelaksanaan

Pertimbangkan perkara berikut coretan kod:

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

Di sini, --n mentakrifkan bilangan maksimum lajur. minmax() memastikan bahawa setiap lajur mempunyai lebar minimum 200px, tetapi tidak akan melebihi 100%/var(--n). Formula ini menjamin bahawa apabila lebar bekas bertambah, lebar lajur tidak akan melebihi 100%/maksimum_bilangan_lajur, menghalang penciptaan lajur tambahan.

Teknik ini membolehkan anda mencipta grid dengan reka bentuk responsif yang menyesuaikan diri dengan pelbagai skrin saiz sambil mengekalkan kiraan lajur maksimum yang ditentukan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menetapkan Bilangan Maksimum Lajur dalam Grid CSS tanpa Menggunakan Pertanyaan Media?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!