Mengapa Grid CSS Saya Melimpah Apabila Menggunakan Jurang Peratusan?

Memahami Isu Limpahan Peratusan Jurang Grid CSS

Apabila menggunakan grid CSS, menyatakan sifat jurang grid sebagai peratusan kadangkala boleh membawa kepada yang tidak dijangka hasil, terutamanya kandungan yang melimpah. Dalam artikel ini, kami akan menyelidiki sebab di sebalik limpahan ini dan menyediakan penyelesaian untuk menyelesaikannya.

Masalahnya: Jurang Peratusan dan Saiz Kandungan

Pada mulanya, nilai peratusan untuk jurang grid dikira relatif kepada ketinggian bekas grid. Walau bagaimanapun, pendekatan ini boleh membawa kepada ketidakkonsistenan dalam tingkah laku penyemak imbas yang berbeza. Penyemak imbas terlebih dahulu mengira ketinggian grid berdasarkan kandungannya, dengan berkesan mengabaikan jurang peratusan. Ini menyebabkan kandungan memenuhi keseluruhan ruang grid, mengakibatkan limpahan di luar grid.

Contoh:

Pertimbangkan kod berikut:

.grid {
  display: grid;
  grid-gap: 50%;
  background-color: blue;
}

.grid-1 {
  background-color: red;
}

<div class="grid">
  <div class="grid-1">
    test
  </div>
  <div class="grid-1">
    test
  </div>
  <div class="grid-1">
    test
  </div>
</div>

Penyelesaian: Melaraskan Grid Ketinggian

Untuk menyelesaikan isu ini, kami boleh melaraskan ketinggian grid secara eksplisit. Satu pendekatan ialah menggunakan sifat ketinggian, memastikan bahawa ia lebih besar daripada jumlah ketinggian kandungan:

.grid {
  display: grid;
  grid-gap: 50%;
  background-color: blue;
  height: calc(100% + 50%);
}

Sebagai alternatif, kita boleh menggunakan fungsi calc() untuk menentukan ketinggian grid berdasarkan peratusan jurang:

.grid {
  display: grid;
  grid-gap: 50%;
  background-color: blue;
  height: calc(100% + 25% * 2);  // 50% divided by 2 for each gap
}

Dengan mentakrifkan ketinggian grid secara eksplisit, kami memastikan ia menampung kedua-dua kandungan dan jurang berasaskan peratusan, menghalang sebarang kandungan melimpah.

Atas ialah kandungan terperinci Mengapa Grid CSS Saya Melimpah Apabila Menggunakan Jurang Peratusan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!