Chrome/Edge在Elements面板勾选Grid图标、Firefox在Layout面板勾选Grid选项可高亮网格线与区域名；需确保有grid-template-rows/columns，注意overflow:hidden裁剪、gap仅高亮不包含margin、响应式需手动重启高亮、嵌套Grid须逐层开启。
浏览器开发者工具里打开Grid高亮
Chrome 和 Edge 的 Elements 面板中，选中一个设置了 display: grid 或 display: inline-grid 的元素后，右上角会出现一个小网格图标（或在 Styles 面板里找 grid 字样旁的复选框），勾选它就能实时叠加显示行线、列线和区域名。
Firefox 类似，但入口在 Layout 面板 → Grid 选项卡，同样勾选 Show grid line numbers 和 Highlight grid tracks。
常见错误现象：grid 高亮没反应？先确认该元素确实有 grid-template-rows 或 grid-template-columns（哪怕值是 none），纯 display: grid + 子项 grid-column 不触发高亮；另外父容器若被 overflow: hidden 裁剪，线条可能被截断。
用 grid-template-areas 快速定位布局区块
当页面用命名区域组织结构时，grid-template-areas 的字符串定义就是最直观的“地图”。开发者工具高亮后，每个区域会标出对应名字，一眼看出 header 占几列、sidebar 是否错位。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 写
grid-template-areas时每行用引号包裹，空格分隔列，点（.）表示空单元格——格式不对会导致整条声明失效，控制台不报错但布局塌陷 - 多行字符串里混用单双引号容易漏转义，推荐统一用反引号（
`）配合模板字面量写法（仅限 JS 动态注入场景） - Firefox 的 Grid 面板能直接把
grid-template-areas渲染成可点击的热区图，Chrome 目前只标名称不标范围框
检查 grid-gap 和 gap 是否生效
gap（或旧版 grid-gap）控制的是轨道之间的空隙，不是子项外边距。高亮开启后，间隙区域会以半透明色块填充，但注意：如果子项用了 margin，它会叠加在 gap 之外，导致实际间距变大，而高亮只反映 gap 值。
容易踩的坑：
-
gap在 flex 布局中也有效，但在 grid 中才被高亮渲染；别指望在 flex 元素上看到 gap 色块 - 设置
gap: 10px 20px时，开发者工具通常只显示横向/纵向数值，不会自动换算成视觉宽度——需手动比对元素尺寸面板里的 computed 值 - Safari 14.1+ 才完全支持
gap，老版本仍需用grid-gap，且高亮兼容性略差
响应式 Grid 断点下如何验证结构变化
媒体查询改了 grid-template-columns，但高亮不会自动刷新。必须手动切换设备尺寸或修改 viewport 宽度后，重新点击目标元素，再勾一次高亮开关——否则看到的还是上一个断点的网格线。
实操建议：
- 在 Sources 面板里设 DOM 断点（Break on attribute modification），监听
style或class变化，方便捕捉响应式类名切换瞬间 - 用
matchMedia+console.log输出当前激活的断点名，配合高亮观察，比反复拖动窗口更稳 - 某些 CSS-in-JS 方案（如 Emotion）动态插入样式时，高亮可能延迟 1–2 帧，稍等片刻再勾选
真正麻烦的是嵌套 Grid：父 Grid 高亮开了，子 Grid 默认不联动，得单独点进去再开一次。没人帮你自动递归，得自己一层层点进去看。
