在媒体查询中修改 grid-template 必须重写完整声明以覆盖原优先级，不能仅改子属性；grid-template-areas 值须为单引号包裹的完整字符串，行列数必须严格对齐，否则声明静默失效。
grid-template 在媒体查询里怎么改才生效
直接在 @media 里重写 grid-template 是最干净的做法，但很多人写了没反应——大概率是因为没覆盖到原始声明的优先级，或者用错了属性名（比如误写成 grid-template-areas 却漏了引号）。
- 必须用完整、可覆盖的声明：如果原先是
grid-template: "header header" "main sidebar" / 1fr 300px;，媒体查询里就得写同级的grid-template，不能只写grid-template-rows期望它“叠加”生效 -
grid-template是简写，会重置grid-template-rows、grid-template-columns和grid-template-areas三者，漏掉任一值就会变成none或auto，布局直接崩 - 移动端优先时，基础样式写窄屏布局，
@media (min-width: 768px)里再改宽屏；反过来写容易被覆盖失败
grid-template-areas 字符串换行写法的坑
很多人复制示例时把多行字符串写成 JS 那样用加号拼接，或在 CSS 里硬换行不加引号——grid-template-areas 的值必须是单个带引号的字符串，换行只是可读性写法，不是语法要求。
- 正确：
grid-template-areas: "header header" "main sidebar" "footer footer"; - 错误：
grid-template-areas: "header header" "main" "sidebar";（第二行只有 "main"，第三行只有 "sidebar"，列数对不上，整条声明失效） - 错误：
grid-template-areas: "header header" "main sidebar" "footer";（最后一行少一个词，浏览器会静默忽略该声明） - 想用变量控制？CSS 本身不支持，得靠 JS 注入或预处理器（如 Sass 的
@media嵌套 +$areas变量）
用 grid-template 重组时，子元素 grid-area 名字要不要跟着变
不用。只要 grid-area 值和 grid-template-areas 里的名字完全一致（包括大小写和空格），浏览器就能匹配上。改的是“容器怎么分格子”，不是“格子叫什么”。
- 子元素写
grid-area: sidebar;，那grid-template-areas里就必须有sidebar这个词，不能写成side-bar或Sidebar - 媒体查询切换后，如果某个
grid-area名在新模板里不存在，对应元素会回退到默认流式位置（可能叠在一起或跑出视口） - 调试技巧：临时给每个
grid-area加background，一眼看出哪些区域没被模板定义
IE11 兼容下 grid-template 完全不可用怎么办
IE11 不支持 grid-template-areas 和 grid-template 简写（只认老式 display: -ms-grid），所以别试图用前缀或降级 hack 让它生效。真要兼容，得双布局方案。
立即学习“前端免费学习笔记（深入）”；
- 用
@supports (display: grid)包裹现代布局，里面写完整的grid-template；不支持的浏览器走 float / flex fallback - 避免混用：不要在同一个容器上既写
display: grid又写display: -ms-grid，IE11 会忽略后者 - 工具链注意：Autoprefixer 对
grid-template类属性基本不加前缀，别指望它帮你兼容 IE
真正麻烦的不是怎么写，而是模板字符串里一个空格不对、引号漏半边、行列数不齐——这些错误不会报错，只会让整个网格静默失效，排查时得一行行比对字符数。
