CSS Grid列宽与盒模型冲突时，应使用minmax(0, 1fr)替代1fr以忽略min-content限制，并为子项设置box-sizing: border-box和width: 100%确保填满列宽。
当 CSS Grid 列宽（比如 grid-template-columns: 1fr 200px）和内部元素盒模型的 width、padding、border 发生冲突时，本质是列容器分配的“可用宽度”被盒模型默认的 content-box 计算方式挤占了——内容区变窄，导致溢出或布局错位。解决核心不是硬调 width，而是让列宽计算“包容”盒模型开销，关键在 minmax() 和 auto 的合理组合。
用 minmax(0, 1fr) 替代纯 1fr 避免最小内容宽度干扰
默认 1fr 等价于 minmax(min-content, 1fr)，浏览器会先按子元素「自然最小宽度」（如带 padding/border 的 div 文字撑开的宽度）预留空间，常导致列被撑宽、破坏比例。改成 minmax(0, 1fr)，把下限设为 0，强制忽略子元素的 min-content 限制，让 fr 真正按剩余空间等分。
例如：
❌ 容易出问题：grid-template-columns: 1fr 200px;✅ 改为：
grid-template-columns: minmax(0, 1fr) 200px;
给 grid 子项设 box-sizing: border-box + 显式 width: 100%
即使列宽算对了，若子元素用了 width: 100% 却没设 box-sizing: border-box，它的 100% 仍只作用于 content 区，padding/border 会额外加出去，造成溢出。
立即学习“前端免费学习笔记（深入）”；
正确做法：
- Grid 容器子项统一加：
box-sizing: border-box; - 再设
width: 100%;—— 此时 100% 指包含 padding/border 的整个盒宽 - 避免同时设
width和padding却不设box-sizing
用 auto 替代固定 px 值，让列宽自适应内容盒模型
当某列内容宽度波动大（比如含输入框+按钮），硬写 200px 易冲突。改用 auto 让该列“刚好包裹内容”，再配合 minmax() 设弹性上下限：
-
minmax(150px, 250px)：列宽在 150–250px 间弹性伸缩 -
minmax(min-content, max-content)：完全由内容决定，但可能破坏整体布局 -
auto单独用 ≈minmax(min-content, max-content)，慎用
推荐组合：grid-template-columns: 1fr minmax(120px, auto) 1fr; —— 中间列至少 120px，有空间就自动撑开，不挤占两侧。
检查 grid-gap 是否被误算进列宽
gap 是网格间隙，不计入列宽，但容易误以为它“占用列空间”。实际列宽 = 分配到的轨道宽度，gap 是额外加在列之间的。如果发现总宽超预期，优先检查是否多加了 padding 或 border，而不是怀疑 gap。
验证技巧：临时加 outline: 1px solid red; 到 grid 子项，看红色边框是否紧贴列边界——若 outline 溢出，说明子项盒模型超出列宽，需回溯上面三点。
基本上就这些。核心就两条：列轨道用 minmax(0, 1fr) 放弃内容最小约束，子项用 box-sizing: border-box + width: 100% 确保填满。不复杂但容易忽略。
