為什麼Grid-template-columns中顯示100%的網格超出了正文？

為什麼 Grid-template-columns 中顯示 100% 的網格會超出正文？

在提供的 CSS 程式碼中：

<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>

該問題不是由 width: 100% 屬性引起的，而是由 grid-template-columns 設定引起的。當指定百分比（40% 和 60%）和網格間隙（5px）時，總寬度超過 100%。這會導致固定定位時父容器超出主體的右邊緣。

解：使用 fr 單位

要解決此問題，建議使用小數單位 (fr) 而不是grid-template-columns 聲明的百分比。考慮到任何定義的間隙，小數單位按比例分配空間：

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

範例：

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

透過此修改，父容器現在將在主體邊界內完全可見，即使在定位固定。

以上是為什麼Grid-template-columns中顯示100%的網格超出了正文？的詳細內容。更多資訊請關注PHP中文網其他相關文章！