grid-template-areas合并单元格需确保相同名称连续成矩形，否则整行被忽略；响应式下用grid-column:1/-1替代固定列数；跨行溢出时用min-height/max-height限制；ie11降级用数值定位并检测@supports。
grid-template-areas 里怎么合并单元格才不塌陷
直接用 grid-template-areas 定义区域时，相同字符串必须严格连续、成矩形，否则浏览器会静默忽略整行定义，导致布局错乱甚至退化为单列。
- 错误写法：
"header header sidebar" "main main ."—— 中间那个.打断了main的连续性，第二行的main区域会被丢弃 - 正确写法：
"header header sidebar" "main main sidebar"或者用grid-column: span 2显式合并 - 调试技巧：在 DevTools 里勾选「Show grid area names」，一眼看出哪些区域没被识别
多级筛选菜单需要响应式折叠，grid-column-end 怎么设才不冲突
用 grid-column-end 控制某一级菜单占满剩余列时，如果父容器列数动态变化（比如从 grid-template-columns: repeat(4, 1fr) 切到 repeat(2, 1fr)），硬写 grid-column-end: 5 会越界失效。
- 优先用
grid-column: 1 / -1，让元素横跨从第一列到最后一列，不依赖具体列数 - 避免
span N配合auto-fit使用——grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))))下，span 3可能跨不到预期位置 - 折叠态切换时，别只改
display: none；配合grid-area: none或移除对应grid-template-areas字符串，防止空占位影响其他项对齐
筛选项嵌套层级深，grid-row 跨行合并后内容溢出怎么办
grid-row: 1 / 4 这类跨行声明本身不控制内容高度，如果子元素（比如下拉列表、多行标签）撑高了单元格，相邻行会被强行拉伸，破坏筛选菜单的紧凑节奏。
- 给跨行容器加
overflow: hidden或overflow-y: auto，但注意滚动条会截断阴影/浮层 - 更稳的做法：用
min-height+max-height组合限制单元格高度，再配display: grid内部微调子项排列 - 别依赖
align-content: start拉齐多行——它作用于整个网格容器，对单个跨行项无效；该用justify-self或align-self控制单个网格项自身对齐
IE11 兼容性下 grid-area 名称失效，怎么降级处理
IE11 对 grid-template-areas 支持极差，连基础语法都常解析失败，且不报错。一旦启用，整个网格布局可能回退成文档流，筛选菜单直接堆成一竖条。
立即学习“前端免费学习笔记（深入）”；
- 检测手段：用
@supports (display: grid) and (grid-template-areas: none)包裹 Grid 样式，IE11 会跳过 - 降级方案不是“用 flex 补”，而是改用
grid-column/grid-row数值定位（IE11 支持），避开grid-area字符串 - 关键点：所有涉及区域命名的 js 逻辑（比如点击某区域触发筛选）必须同步判断是否进入降级路径，否则 dom 存在但样式未生效，交互就挂了
真正麻烦的不是怎么写 Grid，是当「筛选项数量动态增减」+「某级菜单支持展开/收起」+「还要适配小屏折叠」三者叠加时，grid-template-areas 的字符串拼接和重计算极易出错——这时候宁可放弃语义化区域名，改用数值坐标加 JS 动态更新 grid-column。