為什麼在使用帶有百分比的“grid-template-columns”時我的網格會溢出？

網格溢位主體與100% 網格範本列：

考慮以下程式碼：

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

透過這些設置，如果位置固定，父div會溢出到右側身體的。然而，問題不在於寬度：100%，而在於網格模板。

解決方案：

出現問題是因為網格模板分割了可用的空間分為 40% 和 60%，留出 5px 的網格間隙。這超過了100%。要解決此問題，請改用 fr 單位：

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

透過此更改，列將在考慮 5px 間隙後分割剩餘空間。因此，即使位置固定，父 div 也將適合主體。

以上是為什麼在使用帶有百分比的“grid-template-columns”時我的網格會溢出？的詳細內容。更多資訊請關注PHP中文網其他相關文章！