浏览器开发者工具可直接开启css网格线，chrome/edge需勾选“show grid overlay”，firefox点击“grid”图标，前提为元素正确设置display: grid或inline-grid；background-image渐变法可固定显示像素级网格；显式定义grid-template轨道并命名能增强调试可见性；figma网格需手动转为css变量统一管理。
浏览器开发者工具里直接开启网格线
Chrome、Edge 和 Firefox 的开发者工具都内置了 CSS 网格可视化功能，不需要写代码、不依赖插件，打开就能用。关键是要选中一个应用了 display: grid 的元素，再在「Styles」面板里勾选「Show grid overlay」（Chrome/Edge）或「Grid」图标（Firefox）。
常见错误是：点了「Grid」但没反应——大概率是因为目标元素没真正启用 CSS Grid，比如只写了 grid-template-columns 却漏了 display: grid，或者被父级的 display: inline 或 position: absolute 干扰导致计算失效。
注意：display: inline-grid 同样支持；但 display: subgrid 在部分旧版浏览器中不显示辅助线，建议先用主网格验证布局逻辑。
用 CSS background-image 手动画像素级网格
当需要在设计稿预览、原型演示或打印样式中固定显示网格（比如 8px 基准），用渐变背景最轻量：
body {
background-image:
linear-gradient(0deg, #ccc 1px, transparent 1px),
linear-gradient(90deg, #ccc 1px, transparent 1px);
background-size: 8px 8px;
}
这里的关键参数是 background-size：它决定网格间距，必须和你的设计系统对齐；1px 是线宽，改大变粗、改小可能消失（尤其缩放后）；两层 linear-gradient 分别控制横线和竖线方向。
容易踩的坑：
-
background-color覆盖了网格？加background-color: transparent - 内容区域被网格干扰？给容器单独设
background: none - 高 DPI 屏幕下线变虚？把
1px换成0.5px并配合transform: scale(2)补偿（慎用，影响文本渲染）
用 grid-template-columns 和 grid-template-rows 的 track listing 显示隐式网格线
CSS Grid 的轨道定义本身就会在开发者工具中生成可交互的线标，但默认只显示显式定义的轨道。如果你写了 grid-template-columns: 1fr 2fr，那么只有这两列之间的线会高亮；而 grid-auto-columns: 100px 创建的隐式列不会自动标出。
要让所有列/行都“可见”，得主动定义全部轨道：
比如 12 列栅格系统，别用 repeat(12, 1fr) 就完事，而是展开写带命名的轨道：
grid-template-columns: [full-start] 16px [col-start] repeat(12, [col] 1fr [col-end] 16px) [col-start] 16px [full-end];
这样在 Chrome 的网格叠加层里，每个 [col-start] 和 [col-end] 都会变成可悬停识别的标签，方便对齐组件。
性能提示：轨道名不影响渲染速度，但过多嵌套命名（如 [main][sidebar][end]）会让开发者工具响应略慢，日常调试保持单层语义名即可。
第三方工具仅在必要时引入：比如 Figma 插件同步到 HTML
Figma 里的「Layout Grid」导出为 HTML 不会自动生成辅助线——它只是注释或占位尺寸参考。真要让开发环境也看到相同网格，得手动把 Figma 的列数、间距、边距转成上面提到的 background-image 或 grid-template 值。
目前没有可靠工具能实时双向同步 Figma 网格与浏览器渲染结果。所谓「Figma to HTML 网格插件」大多只是生成静态 CSS 片段，且不处理响应式断点差异（比如 Figma 画的是 1440px 宽度，但你页面在 768px 下用了不同 grid-template-columns）。
所以更实际的做法是：把 Figma 的设计约束（如 gutter = 24px，margin = 32px）记成变量，在 CSS 中统一管理：
:root {
--grid-gutter: 24px;
--grid-margin: 32px;
}
.grid { grid-gap: var(--grid-gutter); }
这样改一处，所有地方同步更新，比依赖外部工具更可控。
真正难的不是画线，而是让所有人——设计师、前端、产品——对同一套数值有共识。线只是提醒，数值才是契约。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
