Grid-Template-Columns 为 100% 时网格超出正文
为什么 grid-template-columns 为 100% 的显示网格会扩展当位置设置为固定时超出正文？
问题：
考虑以下 CSS 和 HTML：
<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 单位，网格现在将正确分配空间，确保其保持在身体的范围内。
以上是为什么使用固定定位时，100% 网格模板列的网格会超出主体？的详细内容。更多信息请关注PHP中文网其他相关文章！
