CSS Grid的网格线仅为逻辑参考线，不可见且无法设置样式；视觉分隔线需用border或伪元素模拟，开发者工具中的虚线仅是调试辅助。
CSS Grid 本身不支持设置网格线的视觉样式（比如虚线、颜色、粗细）——这些线只是逻辑参考线，永远不可见。 你看到的“虚线”只存在于浏览器开发者工具的叠加层中，是调试辅助，不是渲染结果。想实现视觉上的分隔线，得靠其他手段模拟。
为什么 grid-template-rows/columns 里的 [name] 不会影响显示
方括号命名的 [header-start] 或 [main-end] 只是给逻辑线打标签，用于 grid-row / grid-column 定位，和样式完全无关。它不生成 DOM 元素，也不触发任何绘制行为。即使你在 grid-template-columns: [a] 1fr [b] 1fr [c]; 中写了三个名字，页面上依然什么也看不到。
用 border 或 pseudo-element 模拟虚线网格线
真正能控制“看起来像网格线”的方式只有两种主流做法，且都绕过 Grid 自身限制：
- 在网格项（
grid-item）上设border-bottom/border-right，配合gap留出间距，让边框“错位对齐”成线； - 在容器上用
::before/::after绘制绝对定位的线条，通过calc()或 CSS 自定义属性动态计算位置（需配合已知轨道尺寸）。
例如：要模拟列间虚线，可写 .container { column-gap: 1px; } .item { border-right: 1px dashed #ccc; }，再用 :last-child { border-right: none; } 去掉最右边界。
立即学习“前端免费学习笔记（深入）”；
调试时看到的虚线来自 DevTools，不是 CSS 控制
Chrome/Firefox 的“Layout”面板勾选“Show line numbers”或“Display grid overlay”后出现的虚线，是浏览器渲染引擎临时绘制的辅助线，仅用于开发阶段。它：
- 不受任何 CSS 属性影响（
grid-line-style不存在）； - 无法通过 JS 获取或修改其样式；
- 构建工具（如 Webpack + PostCSS）或生产环境压缩后，它照样只在 DevTools 里存在。
别试图用 @media screen and (max-width: 0) 或伪类去 hack 它——它根本不在 CSSOM 里。
真正需要视觉分隔时，老老实实用 border 或 box-shadow；想调试布局，就依赖 DevTools 的 overlay；两者不能混为一谈。名字再好听，[sidebar-start] 也不会自己画一根线出来。
