如何在CSS Grid布局中添加全宽表单输入且不导致列宽增长

解决方案 #

你的问题根源是auto类型的Grid列默认会以子元素的最小内容宽度作为列宽下限，input元素自带的固有宽度会参与列宽计算，导致列被撑大。之前min-width: 0未生效是因为你没有将其添加到对应的Grid子项（列容器）上。

具体修改步骤：

1. 给所有第二列的Grid直接子元素添加min-width: 0属性，覆盖Grid轨道默认的最小宽度规则，让列宽保持为第一行文本的宽度。
2. 给input元素添加width: 100%和box-sizing: border-box属性，让输入框填满整个列容器，同时不会因为边框、内边距导致溢出。

完整可运行代码：

<div style="display: grid; grid-template-columns: auto auto 1fr">
  <div style="background: red">Hello</div>
  <div style="background: green; min-width: 0">yes I'm a big long</div>
  <div style="background: blue">no</div>
  <div style="background: red">Hello</div>
  <div style="background: green; min-width: 0">
    <input placeholder="input" style="width: 100%; box-sizing: border-box;" />
  </div>
  <div style="background: blue">no</div>
</div>

原理说明

Grid布局中grid-template-columns设置为auto的列，默认最小宽度为auto，会优先适配子元素的最小内容宽度，input元素的默认固有宽度会被计入这个最小宽度，因此会撑大列。给Grid子项显式设置min-width: 0后，列宽会优先按第一行文本宽度计算，不会被input的宽度影响。

内容的提问来源于stack exchange，提问作者ark