Mengapa Grid Saya Melimpah Apabila Menggunakan `grid-template-columns` Dengan Peratusan?

Grid Overflows Body dengan 100% Grid-Template-Columns:

Pertimbangkan kod berikut:

<code class="css">.parent {
  position: fixed;
  width: 100%;
  left: 0;
  top: 14px;
  display: grid;
  grid-template-columns: 40% 60%;
  grid-gap: 5px;
  background: #eee;
}

.left {
  border: 2px solid red;
}

.right {
  border: 2px solid red;
}</code>

<code class="html"><div class='parent'>
  <div class='left'>LEFT</div>
  <div class='right'>RIGHT</div>
</div></code>

Dengan tetapan ini, jika kedudukan ditetapkan, div induk melimpah ke sebelah kanan badan. Isunya, bagaimanapun, bukan terletak pada lebar: 100%, tetapi pada templat grid.

Penyelesaian:

Masalah berlaku kerana templat grid membahagikan yang tersedia ruang kepada 40% dan 60%, meninggalkan 5px untuk jurang grid. Ini melebihi 100%. Untuk menyelesaikan masalah ini, gunakan unit fr sebaliknya:

<code class="css">.parent {
  grid-template-columns: 4fr 6fr;
}</code>

Dengan perubahan ini, lajur akan membahagikan ruang yang tinggal selepas mengambil kira jurang 5px. Oleh itu, div induk akan muat di dalam badan, walaupun dengan kedudukan: tetap.

Atas ialah kandungan terperinci Mengapa Grid Saya Melimpah Apabila Menggunakan `grid-template-columns` Dengan Peratusan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!