为何flex布局中input宽度适配容器，grid布局却无法适配？

我使用Flex和Grid分别实现了两个HTML表单，发现Flex布局里的<input>能够自动适配表单容器的尺寸，但Grid布局中的<input>却做不到。相关代码如下：

HTML代码 #

<form class="flex">
  inputs in a flex column
  <input placeholder="name">
  <input placeholder="age">
</form>  

<form class="grid">
  inputs in a grid
  <input placeholder="name">
  <input placeholder="age">
</form>

CSS代码 #

form {
  gap: 10px;
  width: 100px;
  padding: 10px;
  background-color: grey;
}

form.flex {
  display: flex;
  flex-direction: column;
}

form.grid {
  display: grid;
}

原因分析 #

Flex布局的行为 #

当设置flex-direction: column时，Flex容器的主轴为垂直方向，交叉轴为水平方向。Flex布局默认属性align-items: stretch会让所有子元素在交叉轴方向上拉伸，填满容器的可用水平空间（即容器宽度减去内边距），因此<input>会自动适配容器宽度。

Grid布局的行为 #

Grid容器默认会为每个子元素创建独立的网格单元格，网格项的默认尺寸为auto，即由元素的固有尺寸决定。虽然Grid的默认属性justify-items: stretch也是拉伸规则，但<input>作为替换元素，浏览器给它预设了固定的默认宽度（比如约150px），Grid的stretch不会强制覆盖这个固有宽度，因此<input>无法自动适配Grid容器的宽度。

解决方法 #

有两种简单方式让Grid布局中的<input>适配容器宽度：

1. 给Grid容器设置列宽为1fr
   通过grid-template-columns: 1fr让网格列占满容器可用空间，网格项会跟随列宽自动拉伸：

   form.grid {
     display: grid;
     grid-template-columns: 1fr;
   }
   

2. 给<input>设置width: 100%
   强制<input>填满所在网格单元格的宽度：

   form.grid input {
     width: 100%;
   }
   

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