為什麼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中文網其他相關文章！
