Grid容器未被识别需先确认display: grid生效；网格线不可见应开启浏览器Grid可视化面板；grid-area失效主因是命名与grid-template-areas不严格匹配；悬停显示的行列范围受负索引、span及命名线优先级影响。
Grid容器没被识别？先确认 display 生效
最常见的情况是：写了 grid-template-columns，但开发者工具里根本没出现 Grid 面板——说明浏览器压根没把它当网格容器。这不是代码写错了，而是 display: grid 没生效。
- 右键检查元素 → 查看右侧
Computed面板，搜索display，确认值确实是grid或inline-grid（不是block或被其他样式覆盖） - 注意继承干扰：父级若设了
display: contents，子元素会“穿透”，导致 grid 容器失效 - React/Vue 中动态 class 拼写错误（比如
grid写成grdi）或条件渲染未触发，也会让 Grid 面板不出现
网格线看不见？三步开启可视化叠加
Chrome/Edge/Firefox 都支持原生 Grid 可视化，但入口位置和默认状态不同，容易漏掉关键开关。
- 在 Elements 面板选中容器 → 右侧 Styles 面板找
Grid（Chrome/Edge）或Layout（Firefox）标签 → 点击进入 - 勾选
Show line numbers（显示行列编号）和Show area names（显示grid-template-areas命名区域） - 悬停任意子项，会自动高亮绿色边框，并显示实际占用范围，例如：
grid-row: 2 / 4; grid-column: 1 / -1;—— 这比查 CSS 更真实
明明写了 grid-area 却不生效？命名对不上是主因
grid-area 不是自由填写的字符串，它必须严格匹配 grid-template-areas 中定义的名称，且大小写、空格、引号都需一致。
- 检查
grid-template-areas是否用了换行+缩进拼接，例如：grid-template-areas: "header header" "sidebar main";
——中间不能有中文空格或全角符号 - 如果用了
grid-area: "sidebar"，但grid-template-areas里写的是"side-bar"或sidebar（没加引号），都会失败 - 命名区域只作用于显式网格；若子项落在
grid-template-rows/columns之外，浏览器会创建隐式轨道，但不会自动映射到命名区域
悬停看到的行列范围和预期不符？注意负索引与 span 行为
开发者工具显示的 grid-row: 2 / 4 是最终计算结果，但它可能和你写的源码不一致——尤其涉及负数或 span 时。
立即学习“前端免费学习笔记（深入）”；
-
grid-column: 1 / -1表示从第 1 条列线到倒数第 1 条列线（即最右边界），但如果只有 3 列，-1就等价于4，不是3 -
grid-row: span 2会从当前行起点向后跨 2 行轨道，但若后面没足够空间（比如只剩 1 行），浏览器会自动收缩到末尾，而不是报错或溢出 - 命名线（如
[main-start]）优先级高于数字索引；若同时存在grid-row: main-start / main-end和grid-row: 2 / 4，前者会生效，后者被忽略
真正卡住的时候，往往不是语法写错，而是“看不见网格线”导致脑内建模和实际布局脱节。打开开发者工具的 Grid 可视化不是锦上添花，而是调试 CSS Grid 的基础操作——就像写 JS 不开 console，等于蒙眼调代码。
