根本原因是绝对定位元素脱离网格流，grid-area仅作用于正常流内元素；应设父容器position: relative，菜单用absolute定位并锚定其上，避免影响网格轨道高度。
grid-template-areas 里写 menu 却不显示悬浮菜单？
常见现象是：用 grid-template-areas 划出 "menu content" 区域，再给 .menu 加 position: absolute 或 transform: translateY(-100%) 做悬停展开，结果菜单直接消失或错位。
根本原因在于：绝对定位元素会脱离网格流，grid-area: menu 只影响**正常流内的占位**，对已脱离的元素无效。浏览器不会把 position: absolute 元素“塞回”你定义的区域里。
- 想让悬浮菜单视觉上“贴着”网格单元格出现，得用
position: relative在父容器（比如.header）上设定位上下文 -
.menu本身用position: absolute，但 top/left 值要相对于父容器计算，不是相对于整个 viewport - 如果父容器没设
position: relative，absolute会一直往上找，可能锚定到body，导致偏移不可控
hover 触发后菜单位置飘移、盖不住内容？
典型错误是只靠 display: none/block 切换，却没处理网格轨道高度变化——比如菜单展开时撑开 .header 行高，导致下方 content 下滑，视觉上像“被顶下去”。
这不是 css Grid 的锅，而是没隔离布局影响。Grid 的 grid-template-rows 是静态声明，不能自动响应子元素尺寸变化（除非用 auto 或 minmax()）。
立即学习“前端免费学习笔记（深入）”；
- 把菜单放在
header内部，但用position: absolute+z-index浮在上方，避免参与行高计算 - 确保
header的grid-row高度固定（如60px），否则auto或1fr会让它随内容伸缩 - 菜单内容超出容器时，加
overflow-y: auto和max-height，别让它无限制拉高
用 grid-column 控制菜单宽度却失效？
比如写 .menu { grid-column: 1 / -1; } 想横跨整行，结果只占一列——这通常是因为菜单没放在 grid 容器直接子元素层级。
CSS Grid 的 grid-column、grid-row 等属性只对**直接子元素**生效。如果菜单是 .header 的子元素，而 .header 本身只是 grid 容器的子项，那菜单就完全不在 grid 轨道控制范围内。
- 确认菜单 dom 是 grid 容器的直接子节点，否则所有
grid-*属性都无效 - 若必须嵌套（比如
.header > .menu），那就放弃用grid-column控宽，改用width: 100%+left: 0配合父级position: relative - 注意
grid-column: 1 / -1中的-1指最后一根线，不是“最后一列”，如果网格只有 3 列，-1就是第 4 条线
IE11 下悬浮菜单完全不显示？
IE11 对 CSS Grid 支持有限：只认 display: -ms-grid 旧语法，且不支持 grid-template-areas、grid-column 等现代属性。更麻烦的是，IE11 的 position: absolute 在 -ms-grid 容器内行为异常，常导致坐标计算错误。
这不是兼容性开关能解决的问题，得换思路。
- 别在 IE11 里硬扛 Grid 布局做悬浮菜单，降级为
Float+inline-block或 Flexbox（IE10+ 支持） - 用
@supports (display: grid)包裹 Grid 相关样式，IE11 自动跳过；再单独写一套 IE 友好规则 - 绝对定位菜单的
top/left值尽量用像素或百分比，避开calc()和vh单位，IE11 对它们解析不稳定
网格单元格本身是静态容器，悬浮菜单是动态层——两者的配合点不在“网格分配”，而在“父容器定位上下文”和“脱离文档流后的锚定方式”。很多人卡在以为 grid-area 能管住绝对定位元素，其实它只管“该在哪留空”。