用 grid-template-areas 可视化定义页头区域，移动端优先布局，通过媒体查询切换区域字符串与列轨道，避免硬编码定位；ie11 需手动降级为 -ms-grid 并弃用点号占位。
用 grid-template-areas 直观划分 logo / 搜索 / 导航区域
响应式页头最怕“写死位置”——比如用 float 或绝对定位硬塞元素，一换屏幕尺寸就错位。直接用 grid-template-areas 定义语义区域，既可读又易维护。
关键不是“怎么画格子”，而是让每个区块在不同断点有明确归属：
-
grid-template-areas的字符串必须每行引号内列数一致，否则整个声明失效（浏览器静默忽略） - 空单元格用
.占位，不能留空格或漏掉引号 - 移动端优先：先写窄屏布局，再用
@media覆盖宽屏
header {
display: grid;
grid-template-areas:
"logo . search"
"nav nav nav";
}
@media (max-width: 768px) {
header {
grid-template-areas:
"logo"
"search"
"nav";
}
}搜索框在小屏下占满宽度但不撑开 logo
常见错误是给 search 加 width: 100%，结果它把 logo 挤出视口——因为 Grid 默认按内容分配列宽，100% 在 Grid 容器里意义模糊。
正确做法是控制列轨道本身：
立即学习“前端免费学习笔记（深入）”；
- 小屏时让
search所在列设为1fr，其他区域单独定义 - 避免对 Grid 子项设
width或flex，Grid 的布局权在容器层 - 如果搜索框内有
input，记得加width: 100%，但这是子元素内部的事
@media (max-width: 768px) {
header {
grid-template-areas: "logo" "search" "nav";
grid-template-columns: 1fr; /* 关键：统一单列 */
}
.search-input {
width: 100%; /* input 自身才需要 */
}
}导航菜单折叠后仍保持 grid 区域语义
很多人一缩屏就改 DOM 结构（比如用 JS 插入 .hamburger），结果 Grid 区域名和实际元素对不上，grid-area: nav 失效，样式全乱。
真正轻量的做法是保留结构，只切换可见性与布局行为：
- 用
display: contents让导航容器“消失”，但子项仍参与 Grid 布局（兼容性注意：IE 不支持） - 更稳妥的是用
visibility: hidden+height: 0+overflow: hidden隐藏，区域名依然生效 - 不要删掉
nav元素或改它的grid-area值——区域名是 CSS 层面的契约，不是 JS 控制的开关
IE11 兼容时 grid-template-areas 不生效怎么办
IE11 支持 Grid，但只认旧语法：grid-template-areas 必须配合 -ms-grid 前缀，且不支持点号 . 占位，所有区域名都得写实。
这意味着你得写两套布局逻辑，但可以共用同一套 HTML 结构：
- IE 专用规则必须放在标准规则之后，靠层叠覆盖
-
-ms-grid-row和-ms-grid-column手动指定每个元素位置，无法用区域名抽象 - 别试图用 Autoprefixer 自动生成——它不处理
grid-template-areas的 IE 降级
/* 标准写法 */
header { grid-template-areas: "logo search nav"; }
<p>/<em> IE11 专用（必须手动算行列） </em>/
@supports (-ms-ime-mode: auto) {
header {
display: -ms-grid;
-ms-grid-rows: 1fr;
-ms-grid-columns: 150px 1fr 200px;
}
.logo { -ms-grid-column: 1; }
.search { -ms-grid-column: 2; }
.nav { -ms-grid-column: 3; }
}网格区域名一旦定义，就绑定了布局意图；改结构不如改区域分配，改区域不如先想清断点逻辑。很多“响应式失败”其实卡在没想明白：小屏时搜索框到底该和 logo 并排，还是独占一行——这个决策比怎么写 CSS 重要得多。
