CSS中minmax()配合auto-fill使用未达预期响应效果求助

你的问题出在两个关键点：

• minmax(300px, auto)中的auto是基于列内容宽度计算的，也就是输入框的默认宽度，导致列不会主动拉伸填满容器剩余空间，和固定300px的列效果几乎一致。
• 输入框默认是收缩到自身内容宽度的，就算列宽能拉伸，输入框也不会自动占满列宽。

直接按以下步骤修改即可解决：

1. 调整Grid列定义，把auto替换成1fr，让列在保持最小300px的前提下，尽可能占满容器可用空间：

   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   

2. 给表单内的输入框设置宽度为100%，确保它填满所在的Grid列：

   input {
     width: 100%;
     box-sizing: border-box; /* 可选，防止padding或border导致宽度溢出容器 */
   }
   

这样修改后，拉伸浏览器窗口时，Grid列会自动调整宽度并填满表单容器，同时输入框也会跟着占满对应列的宽度，完全符合你想要的响应式效果。

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