输入框需设 min-width: 0 才能随容器缩放，否则因替换元素固有最小宽（约120px）导致崩塌；按钮 auto 宽度由内容、内边距、边框及 min-width 共同决定，避免意外约束。
直接用 grid-template-columns: 1fr auto 做搜索框布局，能实现输入框自适应、按钮固定宽，但默认情况下它**不会自动响应容器缩放或内容溢出**——你需要额外控制子元素的最小尺寸和收缩行为，否则在小屏或窄容器里容易崩。
为什么输入框会“不收缩”甚至撑破容器
CSS Grid 的 1fr 单元格默认有 min-width: auto，而 <input> 这类替换元素（replaced element）自带固有最小宽度（比如 Chrome 下约 120px），导致即使容器变窄，1fr 也不愿压缩到比这个值更小。
- 给输入框显式设置
min-width: 0或min-width: min-content（推荐前者） - 确保父容器没有意外的
min-width或white-space: nowrap - 避免对输入框设死
width: 100%，它会和 Grid 的 track 分配冲突
按钮用 auto 时的实际宽度由什么决定
auto 不等于“内容宽度”，而是根据其 content + padding + border + min-width 综合计算；如果按钮里是图标（如 <svg></svg>）或文字“搜索”，它通常表现正常，但一旦加了 display: flex、width: 100% 或 min-width: 200px，就会强行拉宽整个 auto 列。
- 检查按钮是否意外设置了
min-width（尤其来自重置样式或 UI 框架） - 用
flex布局按钮内部时，加flex-shrink: 0防止被压缩，但别给外层加width - 真要限制按钮最大宽？用
max-width，而不是width
响应式断点下如何安全切换列模板
直接在媒体查询里改 grid-template-columns 是可行的，但要注意：如果输入框在小屏下需要变成全宽、按钮换行，1fr auto 就不够用了——Grid 不会自动“换行”，得配合 grid-auto-flow: row 或改用 grid-template-rows。
- 小屏建议切为
grid-template-columns: 1fr+grid-template-rows: auto auto，再用grid-row控制按钮位置 - 或者更简单：小屏改用
display: flex; flex-wrap: wrap，避免 Grid 复杂性 - 千万别只改
columns却忘了重置grid-column/grid-row的显式定位，否则子元素可能错位
最常被忽略的是 min-width: 0 在输入框上的必要性——没它，1fr 在窄容器里就只是个摆设；还有就是按钮的 auto 宽度其实很“诚实”，你给它多少约束，它就表现得多老实。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
