Grid CSS: Bagaimana untuk Mengehadkan Bilangan Maksimum Lajur Secara Responsif?

Grid CSS: Mengekalkan Bilangan Maksimum Lajur Tanpa Pertanyaan Media

Soalan:

Adakah boleh untuk mentakrifkan grid CSS dengan bilangan lajur maksimum sambil membenarkan elemen dibalut secara automatik baris baharu apabila lebar skrin berubah?

Penyelesaian:

Menggunakan Grid CSS, anda boleh mengehadkan bilangan lajur melalui ulangan(isi automatik, minmax(maks (lebar, 100%/N), 1fr)) sintaks. Di sini, N mewakili bilangan maksimum lajur yang dikehendaki. Apabila lebar bekas grid bertambah, bahagian 100%/N pengiraan memastikan bahawa lebar setiap lajur tidak pernah melebihi had ini.

Contoh:

Pertimbangkan coretan kod berikut:

.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 {
  background: tomato;
  padding: 5px;
  height: 50px;
  margin: 10px;

  line-height: 50px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
  box-sizing: border-box;
}

Dalam contoh ini, sifat tersuai --n ditetapkan hingga 4, mentakrifkan maksimum 4 lajur. Apabila lebar bekas berubah, item akan membalut ke baris baharu secara automatik sambil mengekalkan had lajur yang ditentukan.

Penyelesaian ini menyediakan reka letak grid yang fleksibel dan responsif tanpa bergantung pada pertanyaan media atau JavaScript.

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