根本原因是input作为替换元素默认min-width:auto，需同时控制轨道（minmax(0,1fr)）、网格项父容器（min-width:0）和input自身（width:100%、box-sizing:border-box）。
输入框撑开 Grid 列宽的根本原因
不是 <input> 本身“太宽”，而是它作为替换元素，默认 min-width: auto（即内容固有最小宽度），浏览器会优先保障其可操作性，哪怕网格轨道只分到 120px，一个带默认样式的 <input> 也可能强行拉宽整列。你看到 grid-template-columns: 1fr 1fr 没变，但计算宽度一列 320px、一列 80px，就是这个机制在起作用。
必须同时控制三处：轨道、网格项、<input> 自身
只改其中一处，90% 的场景仍然溢出：
- 轨道层：用
minmax(0, 1fr)替代1fr，显式允许该列压缩到 0，否则1fr默认下限是min-content - 网格项层（即
<input>的直接父元素）：必须设min-width: 0，这是解除默认约束的开关；若父元素是display: contents或被transform干扰，此设置无效 -
<input>层：设width: 100%（不能只靠max-width: 100%），并确认没有flex-shrink: 0、white-space: nowrap等抗压缩样式
常见错误写法与对应现象
这些写法看似合理，实际无法阻止撑开：
-
input { min-width: 0 }→ 无效，min-width对替换元素自身不生效，必须作用于其父容器 -
.grid { min-width: 0 }→ 无效，容器不参与子项尺寸协商 -
grid-template-columns: minmax(200px, 1fr) 1fr→ 第一列死守 200px，小屏必横向溢出，min-width: 0也救不了 - 没设
box-sizing: border-box→ 边框和 padding 额外增加宽度，尤其在gap小或列数多时迅速累积溢出
移动端和嵌套场景的额外注意点
当 Grid 嵌在 Flex 容器里，或使用 auto-fit 响应式列时，问题会放大：
-
repeat(auto-fit, minmax(0, 1fr))才能真正响应窄屏；auto-fill会保留空轨道，导致列数过多、单列过窄，<input>仍可能因最小交互宽度被浏览器撑起 - 第三方表单组件（如
react-select）内部常含固定宽元素，需检查其根节点是否继承了min-width: 0，必要时加!important覆盖 - 不要依赖
object-fit——它对<input>无效，且不解决轨道尺寸问题
最易被忽略的是：网格项上 min-width: 0 必须在标准布局上下文中生效。任何破坏盒模型的行为（比如 display: contents、未设 box-sizing、父级 transform）都会让这行 CSS 形同虚设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
