grid容器宽度计算准确，问题出在子项min-width: auto与内容固有尺寸冲突；需组合设置min-width: 0、box-sizing: border-box及内容约束（如img{max-width:100%}）来确保子项服从轨道分配。
Grid容器本身没有“宽度计算不准确”这回事——出问题的永远是它的子项（grid item）或子项内部元素的盒模型行为。真正被误算的是每个网格项的内容区、内边距和边框如何挤占分配到的轨道空间。
grid item 的 width: 100% 为什么经常失效
Grid 子项默认有 min-width: auto，这意味着即使你写了 width: 100%，浏览器仍会优先保障其内容的固有最小宽度（比如一段长单词、一张未约束的图片），导致它撑开甚至溢出所在列轨道。
- 典型现象：网格列设为
1fr 1fr，但其中一列明显更宽，鼠标 hover 查看盒模型发现该格子实际宽度 > 轨道分配宽度 - 根本原因不是 Grid 算错了，而是子项没按你预期“服从”分配宽度
-
box-sizing: border-box单独加在子项上并不能解决这个问题——它只影响该元素自身的width是否包含 padding/border，不改变min-width: auto的压制力
为什么全局 box-sizing: border-box 不够用
你可能已经写了 * { box-sizing: border-box; }，但它对 Grid 布局中宽度异常的帮助非常有限。因为：
-
box-sizing解决的是单个元素的width含义问题（content-box vs border-box），而 Grid 宽度错位主因是子项的min-width行为与内容固有尺寸冲突 - 表单控件（
input、select）、图片、inline-block元素等天然带最小宽度倾向，box-sizing完全不干预这个逻辑 - 如果你的网格项里嵌了 Swiper 或其他 JS 组件，它们内部常依赖 flex 布局，而 flex item 同样受
min-width: auto影响——这时仅靠box-sizing更是无能为力
真正有效的修复组合：min-width + box-sizing + 内容约束
要让 Grid 子项老老实实待在分配的轨道里，必须三者配合：
- 给 grid item 直接设置
min-width: 0（覆盖默认的min-width: auto） - 确保子项及其后代都用了
box-sizing: border-box（避免 padding/border 暗中加宽） - 对内容做主动约束：
img { max-width: 100%; height: auto; }、p { overflow-wrap: break-word; }、长文本加text-overflow: ellipsis等 - 如果子项是 Swiper 容器，额外加
min-width: 100%到它的直接父级 grid item 上（这是 Swiper v9+ 在 Grid 中的已知 fix）
别忽略 gap 和 track sizing 的隐性占用
很多人以为 grid-template-columns: 1fr 1fr 就等于两列各占 50%，其实不是——gap 会从总宽度里扣除，然后才把剩余空间分给 fr 列。例如：
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
width: 600px;
}
此时每列实际可用宽度不是 300px，而是 (600px − 20px) / 2 = 290px。如果你在子项里又写了 padding: 16px + border: 1px，而没设 box-sizing: border-box，那内容区只剩 290 − 34 = 256px——视觉上就“变窄了”。这种误差叠加起来，就是所谓“宽度计算不准”的真实来源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
