Mengapa Bekas Grid Saya Melimpah Apabila Menetapkan `grid-template-columns` kepada 100%?

Mengapa Paparan Grid dengan 100% dalam Grid-Template-Lajur Melimpahi Lebar Badan

Apabila menggunakan grid CSS, adalah penting untuk memahami kesannya untuk menetapkan sifat grid-template-columns kepada 100% dan kaitannya dengan kedudukan bekas induk. Mari kita mendalami isu dan penyelesaiannya.

Pertimbangkan coretan 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;
}</code>

Dengan persediaan ini, anda mungkin mengalami masalah di mana bekas induk menjangkaui port pandangan di sebelah kanan sisi apabila kedudukan ditetapkan kepada tetap. Ini bukan disebabkan oleh lebar ditetapkan kepada 100%, sebaliknya gabungan nilai grid-template-lajur yang ditentukan dan jurang grid.

Masalah timbul kerana sifat grid-template-lajur membahagikan ruang yang tersedia menjadi dua lajur, masing-masing ditetapkan kepada 40% dan 60% daripada lebar bekas induk. Selain itu, jurang grid 5px memperkenalkan ruang tambahan antara lajur. Akibatnya, jumlah ruang yang diperuntukkan kepada dua lajur ditambah jurang melebihi 100%, menyebabkan bekas induk melimpah di sebelah kanan.

Untuk menyelesaikan isu ini, anda harus mengelak daripada menyatakan peratusan tetap untuk grid lajur dan sebaliknya gunakan unit fr. Unit fr ialah unit saiz berasaskan pecahan yang membolehkan anda mengagihkan ruang yang tinggal selepas mengambil kira lebar dan jurang yang ditentukan.

Berikut ialah contoh dengan kod yang dilaraskan:

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

Dalam kod yang disemak ini, sifat grid-template-columns ditetapkan kepada 4fr 6fr, menunjukkan bahawa lajur pertama hendaklah 4 unit lebar, dan lajur kedua hendaklah 6 unit lebar, dengan ruang yang tinggal dibahagikan secara berkadar antara mereka. Ini memastikan bekas induk tidak akan melimpahi batasnya, tanpa mengira kedudukannya.

Atas ialah kandungan terperinci Mengapa Bekas Grid Saya Melimpah Apabila Menetapkan `grid-template-columns` kepada 100%?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!