先查父容器是否漏了display: grid，Grid布局仅作用于直系子元素，子元素自身设display: grid或靠class名自动映射均无效；区域名必须与grid-template-areas中引号内字符串逐字符一致（大小写、空格、连字符），否则静默失效。
grid-template-areas声明后菜单没反应？先查父容器是否漏了display: grid
写了grid-template-areas但导航区域还是流式堆叠，不是语法写错，而是父容器（比如.nav-container或header）根本没加display: grid。Grid布局只作用于直系子元素，子元素自己设display: grid或靠class="nav"自动映射都无效。
常见失效点：
- 用了语义标签如
<nav>或<header>，但样式写在子组件里，父级容器没启用 Grid - 误以为
.logo { grid-area: logo; }能生效——实际必须先在grid-template-areas字符串里声明"logo"这个区域名 - 区域名大小写/空格不一致：
grid-area: "Logo"vs"logo"，或写成"logo "（尾部空格）
验证方式：在控制台运行getComputedStyle(el).gridArea，返回空字符串说明没绑上。
多级下拉菜单错位？每级容器都得显式设display: grid
Grid 上下文不会穿透 DOM 层级。只给.sidebar设display: grid，它的孙辈.submenu（比如li > ul.submenu）根本不在该网格中，grid-column: 2这类规则完全无效。
立即学习“前端免费学习笔记（深入）”；
正确做法是逐级显式声明：
-
.sidebar设display: grid和grid-template-columns: 240px 240px 240px - 每个可展开项包裹一层
.submenu-wrapper，并设display: grid -
.submenu自身也必须设display: grid，否则无法解析grid-column
别用grid-column: span 2嵌套分级——二级设span 2，三级再套一层就变成span 4，极易溢出。更稳的是固定列轨道+显式定位：.submenu[data-level="2"] { grid-column: 2; }、.submenu[data-level="3"] { grid-column: 3; }。
移动端菜单折叠后还占空间？必须用display: none，不能靠visibility: hidden
小屏下如果只用visibility: hidden或opacity: 0隐藏子菜单，它仍在渲染流中：占用布局空间、影响滚动高度、屏幕阅读器可读、Tab 键仍聚焦到隐藏项——这违反 WCAG 2.1 可访问性标准。
响应式逻辑要严格分两步：
- 在
@media (max-width: 767px)中统一设.submenu { display: none; } - JS 展开时，仅给当前路径上的那一级加
.submenu.active { display: grid; }，同时清除同级其他.submenu的active类
漏掉任何一级display: none，菜单就会在真实用户操作中出现双滚动、焦点跳跃或语义断裂。
main区域滚动失效？关键在1fr缺高度基准 + min-height: 0没加
后台导航常嵌在main区域里，内容超长时出现页面整体滚动 + main内部又滚动的双滚动条问题。根本原因是：1fr分配的是容器“已有高度”内的空间，不是内容高度；而默认overflow是visible。
必须同时满足三个条件：
- 根容器（如
.app-layout）设height: 100vh或明确高度（React/Vue 中需父级传入或 JS 计算） -
main元素自身加min-height: 0（Grid 子项默认min-height: auto，会撑开容器） -
main内部若嵌了 Flex/Grid，其直接子容器也要加min-width: 0或min-height: 0，否则弹性子项会突破限制
别只写overflow-y: auto——横向溢出可能撑破侧边栏或表格列宽，得配合overflow-x: hidden或min-width: 0一起锁死。
