為什麼將 `grid-template-columns` 設定為 100% 時我的網格容器會溢出？

為什麼Grid-Template-Columns 中100% 的網格顯示會溢出正文寬度

使用CSS 網格時，了解其影響非常重要將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;
}</code>

使用此設置，您可能會遇到父容器超出右側視窗的問題位置設定為固定時的一側。這不是由於寬度設定為 100%，而是由於指定的 grid-template-columns 值和 grid-gap 的組合所致。

出現問題是因為 grid-template-columns 屬性分割將可用空間分成兩列，分別設定為父容器寬度的 40% 和 60%。此外，5px 網格間隙在列之間引入了額外的空間。結果，分配給兩列的總空間加上間隙超過了 100%，導致父容器在右側溢出。

要解決此問題，應避免為網格指定固定百分比欄位並改為使用 fr 單位。 fr 單位是基於分數的大小調整單位，讓您在考慮指定的寬度和間隙後分配剩餘空間。

以下是調整後的程式碼中，grid-template-columns 屬性設定為4fr 6fr，表示第一列應為4個單位寬，第二列應為6 個單位寬，剩餘空間按比例分配。這可以確保父容器不會溢出其邊界，無論其位置為何。

以上是為什麼將 `grid-template-columns` 設定為 100% 時我的網格容器會溢出？的詳細內容。更多資訊請關注PHP中文網其他相關文章！