命名网格线必须在grid-template-columns/rows中定义且中括号需空格包围；仅限同方向引用，区分大小写，不可变量；repeat批量命名自动编号，调试需注意浏览器差异。
命名网格线不是“加个属性就行”，必须写在 grid-template-columns 或 grid-template-rows 的轨道定义中，且中括号前后必须有空格，否则整条声明会被浏览器忽略。
命名语法必须带空格，[name] 不能紧贴尺寸
浏览器只认「独立 token」：中括号及其内容必须被空格包围。比如 1fr [header-start] 2fr 合法；[header-start]1fr 或 1fr[header-start]2fr 都非法，CSS 解析器会直接丢弃整条 grid-template-columns 声明。
- 同一位置可塞多个名字：
1fr [header-start header-top] 2fr - 名字区分大小写：
Header-start和header-start是两条线 - 不能用变量：
grid-column-start: var(--line)不生效，名字必须是字面量
grid-column 和 grid-row 只能引用对应方向的命名线
列方向命名（在 grid-template-columns 里写的）只能用于 grid-column-start、grid-column-end 或 grid-column；行方向命名（在 grid-template-rows 里写的）只对 grid-row-* 有效。写反了不会报错，但布局不生效——元素会退回到默认位置。
- 例如：
grid-template-columns: [main-start] 1fr [main-end];→ 可用grid-column: main-start / main-end - 但
grid-row: main-start完全无效，因为main-start是列线，不是行线 - 想让一条线同时服务行列，得在两个地方都定义：
grid-template-columns: [sidebar-start]; grid-template-rows: [sidebar-start];
用 repeat() 批量命名时，同名线会自动编号
写 repeat(4, [col] 1fr) 实际生成的是四条名为 col 的列线，浏览器内部按顺序记为 col 1、col 2、col 3、col 4。引用时必须带序号，比如 grid-column: col 2 / col 4。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 不写序号（如
grid-column: col）默认取第一条线col 1 - 配合
span也支持：grid-column: col 3 / span 2表示从第 3 条col线开始，跨 2 条轨道 - 注意：Firefox 开发者工具的 Grid Highlighter 能直观看到这些编号线，Chrome 目前不显示序号
调试时别只依赖开发者工具的「Show grid overlay」
Chrome/Edge 的网格辅助线只高亮显式定义的轨道线，对 grid-auto-columns 或 grid-auto-rows 生成的隐式线不显示。如果你写了 grid-template-columns: 1fr 1fr，只会出现 3 条线（0、1、2）；但若子项超出两列，后续列线不会标出，容易误判布局是否按预期扩展。
- 验证隐式行为，得靠实际渲染 + 元素检查器看
grid-column计算值 - 想让所有线都可见，要么手动展开全部轨道：
1fr 1fr 1fr 1fr，要么用background-image手绘基准网格 - 更可靠的做法：始终用命名线 + 显式
grid-template-*覆盖主布局区域，把自动扩展留给边缘容器（如侧边栏、卡片流）
真正难的不是写对语法，而是记住命名线只存在于你明确写出来的那个维度和位置——它不会“自动蔓延”，也不会“智能推断”。漏写一个空格、错用一个方向、或指望名字跨维度复用，都会让布局静默失效，而浏览器连警告都不给。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
