Chrome DevTools 中打开 Grid 面板需选中 grid 容器元素，在 Styles 面板悬停 grid 声明行右上角的网格图标 ❐ 并点击；仅对生效且参与布局的 grid 容器有效，不支持 display: none 等隐藏状态。
Chrome DevTools 里怎么打开 Grid 面板
Grid 布局调试功能默认开启，但需要手动唤出——不是靠右键菜单，也不是在 Elements 标签页顶部找按钮。打开 DevTools 后，选中一个设置了 display: grid 或 display: inline-grid 的元素，然后在右侧的 Styles 面板里，找到对应 grid 相关声明行（比如 display: grid），把鼠标悬停上去，右上角会出现一个小网格图标 ❐，点击它就能弹出可视化叠加层。
常见错误现象：grid 面板不显示？大概率是没选中真正生效 grid 的元素（比如父容器写了 display: grid，但你点的是子项）；或者该元素被 display: none、visibility: hidden 或 opacity: 0 干扰了渲染，DevTools 就不会激活 Grid 工具。
- 只对当前选中且实际参与布局的 grid 容器生效，嵌套 grid 会逐层切换
- 如果用了
grid-template-areas，面板会直接用文字区块标注区域名，比数行/列更直观 - 移动端模拟下 Grid 可视化仍可用，但缩放太小会导致热区偏移，建议保持 100% 缩放操作
怎么用 Grid 面板快速验证 fr / px / % 混合单位行为
Grid 面板里每条轨道线旁会实时显示计算后的尺寸（比如 1fr → 248.5px），这是判断响应式断裂点最直接的方式。不用切回 Console 算比例，也不用反复改 grid-template-columns 猜数值。
使用场景：做适配 iPad 的两栏布局时，写成 grid-template-columns: 1fr 300px，但不确定 1fr 在不同宽度下是否过窄。打开面板后拖动浏览器窗口，观察左侧轨道数值变化，立刻知道临界点在哪。
立即学习“前端免费学习笔记（深入）”；
-
fr单位会随容器剩余空间动态重算，面板里数值跳变明显；px固定不变；%依赖父容器 width，若父级 width 不确定，面板显示值可能和预期偏差 - 当某列设为
minmax(200px, 1fr)，面板会标出当前实际采用的尺寸（200px 还是更大值），比查文档更快定位约束是否生效 - 注意：面板显示的是最终布局尺寸，不含 margin 和 padding，别拿它直接对标设计稿的外边距标注
为什么 grid-gap 显示为虚线却看不到间隙
Grid 面板里 gap 是用浅色虚线框标出的，但它只代表“逻辑间隙位置”，不是真实像素占位。如果 gap 没生效，面板照样画虚线——这容易误导人以为样式写对了。
根本原因通常是：你用了 gap，但容器 display 值不是 grid 或 flex（比如误写成 display: inline-grid 却忘了父级宽高限制导致子项换行，gap 仍存在但视觉不可见）；或者用了旧版 grid-column-gap/grid-row-gap，而浏览器已弃用，需检查是否被 CSS 优先级覆盖。
- 新版
gap在 grid 和 flex 布局中都有效，但 IE 完全不支持，如需兼容得回退写法 - 面板虚线长度 = 当前可见区域内的 gap 范围，滚动后新出现的 gap 区域会自动补上虚线，无需刷新
- 如果 gap 值是
0或负数，面板不显示虚线，但负 gap 本身是合法的（会重叠），只是工具不渲染
如何用 Grid 面板反向定位错位的子元素
子元素跑出网格、上下错位、或被裁剪，往往不是它自己写错了 grid-row，而是父容器的 grid-auto-rows、grid-auto-flow 或隐式轨道设置不合理。Grid 面板能直接暴露这些隐式行为。
实操建议：选中异常子项，在面板里看它被分配到哪一行/列（右上角有坐标提示，如 row: 3 / 4, col: 1 / 2），再对比父容器的 grid-template-rows 定义——如果只定义了 2 行，但它落在第 3 行，说明触发了隐式轨道，此时要检查 grid-auto-rows 是否设得太小（比如 grid-auto-rows: 20px），导致内容溢出。
- 面板坐标基于网格线编号（从 1 开始），不是像素位置，所以即使子项用了
align-self: end，坐标也不会变，但它的实际渲染位置会偏移 - 若子项设置了
grid-area但面板没显示对应区域，大概率是grid-template-areas字符串拼写错误（比如多空格、换行符未转义） - 隐藏的网格线（比如由
grid-row: span 2自动生成的中间线）面板不会标号，但虚线会延伸，这点容易忽略
Grid 面板不显示 z-index 层级、不反映 transform 位移、也不校验 grid-column-start 是否超出隐式轨道上限——这些都得靠人工交叉验证。
