CSS Grid两列布局下固定宽度表单元素溢出的解决方法

给表单设置300px固定宽度并采用Grid布局，先后尝试grid-template-columns: repeat(2, 1fr)、grid-template-columns: auto auto两种写法实现两列布局，表单内元素始终溢出表单区域，需要实现元素自动调整宽度、适配表单固定宽度的效果。

问题复现代码 #

form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  background-color: green;
  width: 300px;
}

textarea {
  grid-column: span 2 / span 2;
}

<form>
  <input placeholder="First Name" type="text" name="first_name" required>
  <input placeholder="Last Name" type="text" name="last_name" required>
  <textarea placeholder="Message" name="message" rows="5"></textarea>
  <input type="submit" value="Submit"> 
</form>

input、textarea这类表单控件默认带浏览器内置的最小宽度限制，Grid布局计算列宽时，默认不会强制压缩元素到小于其固有最小宽度的尺寸，最终元素撑破网格列边界，出现溢出。

添加两个核心样式即可解决溢出问题：

• 给表单内的所有控件设置min-width: 0，覆盖浏览器默认的最小宽度限制，允许Grid按列宽分配规则压缩元素宽度
• 给表单控件设置box-sizing: border-box，让元素的内边距、边框被算入自身总宽度内，避免额外尺寸撑破分配到的列宽

可选优化：给表单控件设置width: 100%，让控件完全占满分配到的列宽，视觉对齐更统一。

修复后完整代码 #

form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  background-color: green;
  width: 300px;
  /* 可选：添加内边距避免控件贴表单边缘，可按需调整数值 */
  padding: 20px;
}

form input,
form textarea {
  /* 允许元素收缩适配网格列宽 */
  min-width: 0;
  /* 内边距、边框计入元素总宽度 */
  box-sizing: border-box;
  /* 可选：控件占满整列宽度 */
  width: 100%;
}

textarea {
  grid-column: span 2;
}

<form>
  <input placeholder="First Name" type="text" name="first_name" required>
  <input placeholder="Last Name" type="text" name="last_name" required>
  <textarea placeholder="Message" name="message" rows="5"></textarea>
  <input type="submit" value="Submit"> 
</form>

• 之前使用grid-template-columns: auto auto未生效也是相同原因：auto列宽计算时会优先参考元素的固有最小宽度，不放开元素最小宽度限制的话，列宽会被元素撑大，依然会出现溢出。
• 如果需要提交按钮跨两列显示，给提交按钮添加grid-column: span 2样式即可。

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