grid布局比flex或float更稳定，因其不依赖子项宽度计算；搜索项不应设width:100%以免挤出相邻元素，应控制列轨道宽度；移动端优先用grid-template-areas垂直堆叠，桌面端用媒体查询改为横向并列；ie11需降级为-ms-grid且无法复用语义区域逻辑。
直接用 grid-template-areas + 媒体查询，比 flex 或 float 更稳——它不依赖子项宽度计算，也不会因 input 撑开容器而错位。
为什么不能对搜索项设 width: 100%
常见错误是给 .search-input 加 width: 100%，结果在 Grid 容器里反而把相邻的 .filter-btn 挤出视口。Grid 的列宽由容器控制，子项不该反向干预轨道分配。
- Grid 中 width 百分比意义模糊，浏览器行为不一致（尤其 Safari）
- 真正该设宽的是列轨道本身，比如用
grid-template-columns: 1fr auto -
.search-input只需加width: 100%——但这是它内部填满所在轨道，不是“撑容器”
移动端优先的 grid-template-areas 写法
先定义窄屏布局：所有条件垂直堆叠，语义清晰、顺序自然。
- 每行引号内列数必须一致，否则整条声明被浏览器静默忽略
- 空位用
.占位，不能留空格或省略引号 - 示例（移动端）：
grid-template-areas: "search" "filter" "btn" - 对应 HTML 子元素需设
grid-area: search/filter/btn
桌面端切换为横向并列布局
用 @media (min-width: 768px) 覆盖区域字符串和列轨道，关键要同步改两处：
-
grid-template-areas: "search filter btn"—— 一行三区域 -
grid-template-columns: 2fr 1fr auto—— 让搜索框占大头，按钮按内容自适应 - 避免写死像素值，
auto比fit-content()兼容性更好（IE11 不支持后者） - 如果按钮文字长度差异大，加
justify-self: end对齐右边缘
IE11 兼容必须手动降级
IE11 不识别标准 Grid，必须用 -ms-grid 重写，且 grid-template-areas 彻底不可用。
- 放弃点号占位，改用
-ms-grid-column和-ms-grid-row手动定位每个子项 -
-ms-grid-columns: 2fr 1fr 80px（IE 不支持auto，需估算按钮宽度） - 无法复用同一套语义区域逻辑，得单独维护一套 IE 样式块
真正麻烦的不是写法，而是区域语义断裂后，后续新增筛选项时要同步改两套位置逻辑。除非项目明确要求支持 IE11，否则建议直接忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
