如何让CSS Grid内的<input>元素与<span>一样按内容比例自适应伸缩

算力阿峰

2026-10-4

可以通过CSS原生属性实现该需求，不需要借助JS手动计算输入框内容宽度。

问题根因

<input> 属于替换元素，默认有浏览器内置的最小宽度（由默认属性 size="20" 决定），且默认尺寸规则不会跟随输入内容动态调整，Grid布局计算列宽时无法像读取普通行内元素内容宽度那样读取输入框的实际内容宽度，因此表现和 <span> 不一致。

实现代码

只需给输入框添加 field-sizing: content 属性即可，该属性为CSS原生提供，专门用于控制表单控件的尺寸跟随内容动态计算：

.grid {
  display: grid;
  grid-template-columns: repeat(2, auto);
  width: 300px;
}

.column {
  border: 1px solid gray;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 针对input补充规则 */
input.column {
  /* 核心：让输入框尺寸跟随内容计算 */
  field-sizing: content;
  /* 消除默认最小宽度约束，避免内容为空或过短时宽度异常 */
  min-width: 0;
  /* 可选：重置输入框默认内边距，和span视觉表现完全统一 */
  padding: 1px 2px;
}