grid-template-areas 必须在每个 @media 中完整重写，每行区域名数量须与 grid-template-columns 列数严格匹配；未出现的 grid-area 元素退出网格；推荐用 min-width 断点、display: contents 语义化重组，避免 JS 动态修改。
grid-template-areas 必须在每个 @media 里完整重写
只改 grid-template-columns 或只调某个子项的 grid-area，根本没法让区域顺序真正重排。浏览器不会“推导”你想要什么结构，它只按当前生效的 grid-template-areas 字符串逐行、逐列渲染。
常见错误现象：grid-area: sidebar 的元素在小屏下没出现，检查发现媒体查询里只写了 grid-template-columns: 1fr，却忘了删掉或重定义 grid-template-areas 中的 "header main sidebar footer"——这时 sidebar 区域仍被声明，但单列布局撑不开三列宽的字符串，整行区域塌陷，元素被挤出容器外。
-
grid-template-areas必须在每个@media块内是独立、完整、语法合法的字符串 - 每行引号内的区域名数量必须与
grid-template-columns的列数严格匹配（比如设了1fr 300px，那每行就得恰好两个区域名，用空格分隔） - 未在当前断点
grid-template-areas中出现的grid-area名，对应元素会退出网格布局（但 DOM 顺序和可访问性不受影响）
用 min-width 而不是 max-width 写断点
绝大多数响应式网格应使用 @media (min-width: 48em) 这类规则，而非 max-width。因为你想“从窄到宽”逐步增强布局能力：小屏单列 → ≥48em 双列 → ≥64em 三列+区域划分。用 min-width 可自然叠加，避免规则互相覆盖。
容易踩的坑：
立即学习“前端免费学习笔记（深入）”；
- 混用
min-width和max-width在同一套媒体查询中，导致样式冲突 - 硬编码像素值如
@media (min-width: 768px)；建议用em单位（1em = 浏览器默认字号），更适配缩放与高 DPR 设备 - 断点只按设备尺寸分，忽略内容密度——比如一个卡片列表，在 900px 宽但内容稀疏时其实早该切双列
用 display: contents 替代 display: none 实现语义化重组
当某区块（如广告栏、工具栏）在小屏下不该独占一行，而应“拆解”进主内容流时，别用 display: none 或 visibility: hidden——它们会让整个容器消失，子元素也失去参与网格的机会。
更干净的做法是设父容器为 display: contents，再给它的子元素单独分配 grid-area：
.ad-banner { display: contents; }
.ad-content { grid-area: footer; }
这样就能把广告内容精准塞到底部区域，不打断主内容流顺序，也不影响语义结构。
-
display: contents不生成盒子，其子元素直接成为网格项，可被任意grid-area捕获 - 配合媒体查询，在桌面端恢复
display: block并赋予独立区域名，实现“一物两用” - 注意兼容性：IE 完全不支持，Safari 15.4+、Chrome 65+、Firefox 63+ 支持良好
避免依赖 JS 动态改 grid-template-areas
仪表盘等需实时重排的场景，直接用 JS 改 style.gridTemplateAreas 看似简单，但每次赋值都会触发强制同步布局计算，卡顿明显，尤其卡片多、DOM 深时。
更稳的做法是预置多套 class，用 className 切换代替内联样式操作：
.dashboard.layout-mobile { grid-template-areas: "header" "main" "footer"; }
.dashboard.layout-desktop { grid-template-areas: "header header" "main sidebar" "footer footer"; }
- JS 只做
el.classList.replace("layout-mobile", "layout-desktop") - 所有布局变化由 CSSOM 批量处理，不触发强制重排
- 区域名大小写、连字符、空格必须与 HTML 中的
grid-area值完全一致，否则元素直接脱离网格
grid-template-areas 声明静默失效——既不报错，也不渲染，排查时最容易被忽略。 
