为什么使用固定定位时，100% 网格模板列的网格会超出主体？

Grid-Template-Columns 为 100% 时网格超出正文

为什么 grid-template-columns 为 100% 的显示网格会扩展当位置设置为固定时超出正文？

问题：

考虑以下 CSS 和 HTML：

.parent {
位置:固定;
宽度:100%;
左:0;
顶部:14px ;
显示:网格;
网格模板列:40% 60%;
网格间隙:5px;
背景:#eee;
}
.left {
边框：2px 纯红色；
}
.right {
边框：2px 纯红色；
}

<div class='parent'><br> <div class='left'>LEFT</div><br> <div class='right'>< RIGHT</div><br></div>

位置不固定时，网格显示正确。但是，当位置设置为固定时，网格会超出右侧的主体。

解决方案：

问题不在于 100% 宽度，而在于与 grid-template-columns 属性。使用百分比和固定网格间隙将超过可用空间的 100%。

相反，依靠 fr 单位按比例分配可用空间，同时考虑网格间隙：

.parent {<br> 位置：固定；<br> 宽度：100%；<br> 左：0 ;<br> 顶部:14px;<br> 显示:网格;<br> 网格模板列:4fr 6fr;<br> 网格间隙:5px;<br> 背景:#eee;<br>}<br>.left {<br> 边框:2px 纯红色;<br>}<br>.right {<br> 边框:2px 纯红色;<br>}

<div class='parent'><br> <div class='left'>LEFT</div><br> <div class= 'right'>RIGHT</div><br></div>

通过使用 fr 单位，网格现在将正确分配空间，确保其保持在身体的范围内。