Bagaimana untuk Menentukan Kiraan Lajur Maksimum dalam Grid CSS Tanpa Pertanyaan Media?

Grid CSS: Menentukan Kiraan Lajur Maksimum Tanpa Pertanyaan Media

Dalam grid CSS, anda boleh menentukan bilangan maksimum lajur untuk grid sambil membenarkan elemen dibalut ke baharu baris apabila lebar skrin berubah. Untuk mencapai matlamat ini, pertimbangkan untuk menggunakan fungsi maks(lebar, 100%/N), di mana N mewakili bilangan maksimum lajur.

Fungsi maks memastikan bahawa jika lebar bekas meningkat, 100%/N akan sentiasa lebih besar daripada lebar. Ini memastikan bahawa tidak akan ada lebih daripada N elemen setiap baris.

Berikut ialah contoh:

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

.grid-item {
  /* Styling for grid items */
}

Dalam contoh ini, bilangan maksimum lajur ditetapkan kepada 4 menggunakan -- n harta adat. Sifat grid-template-columns menggunakan autoisi untuk membuat lajur dan menggunakan fungsi maks untuk memastikan kiraan lajur maksimum yang ditentukan.

Anda boleh melaraskan nilai --n untuk menukar bilangan maksimum lajur seperti yang diperlukan . Ini menyediakan penyelesaian generik kepada keperluan anda tanpa bergantung pada JavaScript atau pertanyaan media.

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