真正生效的 grid 容器是设置了 display: grid 或 inline-grid 且未被隐藏、参与布局的直接父元素；需在 Elements 面板逐层上查，认准带灰色 grid 徽章者点击激活。
怎么选中真正生效的 grid 容器元素
Grid 面板不会对任意带 grid 字样的元素响应，只认「当前渲染且参与布局」的容器。常见误操作是点中了子项、伪元素或被 display: none / visibility: hidden / opacity: 0 干扰的父容器——这些情况下面板图标根本不会出现。
正确做法是：在 Elements 面板里逐层向上检查，找到第一个设置了 display: grid 或 display: inline-grid 且未被隐藏的直接父元素；它旁边会显示一个灰色 grid 徽章，点击即可激活面板。
嵌套 grid 不会自动联动，必须手动切换选中目标容器才能看到对应轨道线。
怎么唤出 Grid 可视化叠加层（不是靠右键）
Grid 面板没有独立入口按钮，也不在右键菜单里。打开 DevTools 后，先选中目标 grid 容器，然后在右侧 Styles 面板中找到 display: grid 这一行（或任何含 grid-template- 的声明），把鼠标悬停上去——右上角会出现一个网格图标 ❐，点击它才弹出可视化叠加层。
立即学习“前端免费学习笔记（深入）”；
如果没看到这个图标，说明：该行 CSS 没生效（被覆盖/条件不满足）、或当前选中元素不是 grid 容器、或浏览器缩放比例异常（建议保持 100% 缩放）。
面板开启后，可随时点击图标关闭，不影响其他调试操作。
怎么用面板验证 fr / minmax / % 单位的实际计算值
Grid 面板最实用的地方，是实时显示每条轨道线旁的**计算后尺寸**，比如 1fr → 248.5px、minmax(200px, 1fr) → 200px、50% → 376px。这比切到 Console 手动算比例快得多。
关键观察点：
-
fr值随窗口拖动明显跳变，适合找响应式断裂点 -
minmax()显示当前采用的是 min 还是 max，能快速确认约束是否触发 -
%的数值依赖父容器width，若父级宽度不确定（如fit-content），面板显示值可能和预期偏差
若用了 grid-template-areas，面板会直接用文字标注区域名（如 "header"），比数行号列号直观得多。
为什么 grid 面板有时不显示或失效
不是功能坏了，而是几个硬性限制同时起作用：
— 容器必须实际参与布局：display: none、pointer-events: none（虽少见但存在）、transform: scale(0) 都会导致面板拒绝激活
— 只对「当前选中」且「已计算样式含 grid 布局信息」的元素有效；JavaScript 动态插入 grid 样式后，需重新选中一次
— 移动端模拟下仍可用，但缩放小于 100% 时热区偏移，点击图标可能失灵
最易忽略的一点：面板里显示的轨道尺寸是「当前渲染状态下的快照」，不反映媒体查询未命中时的潜在值——想验证断点，得手动拖动窗口或切设备预设。
