命名线用方括号定义于grid-template-columns/rows中，如[start] 1fr [content]；引用时直接写grid-column: start / content，支持多命名、start/end关键字及rtl自动适配。
用命名线（named lines）代替数字编号，能让网格定位更语义化、更易维护，尤其在响应式或 RTL 场景下优势明显。
命名线的基本写法
在 grid-template-columns 或 grid-template-rows 中，把名字写在方括号里，夹在轨道尺寸前后即可：
grid-template-columns: [start] 1fr [content] 2fr [end];grid-template-rows: [header-start] 80px [header-end main-start] auto [main-end];
每条线可以有多个名字，比如 [header-end main-start] 表示同一条线同时属于两个逻辑区域，方便跨区域引用。
用命名线定位项目
直接在项目上使用名字，替代数字线号：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
-
grid-column: start / content;—— 从[start]线到[content]线 grid-row: header-start / header-end;- 支持关键字
start和end，它们会自动映射到容器最外侧的命名线（需配合direction正确设置）
注意：start 和 end 是关键字，不是字符串，不能加引号；grid-column-start: "start" 是无效写法。
避免命名冲突的实用技巧
多个组件共用命名线时，容易因重名导致意外覆盖。推荐以下做法：
- 按功能+位置组合命名，例如
[sidebar-start]、[form-label-start]，不单用[start] - 子网格（subgrid）不能重新定义同名线，只能消费父级已声明的线名，所以父容器应提前规划好通用线名
- 表单类布局常用
[label]、[input]、[error]这类语义化线名，统一约束输入控件对齐
配合 RTL 布局自动适配
命名线 + start/end 关键字是实现 RTL 友好布局的核心：
- 给容器设
direction: rtl，再写grid-column-start: start;，浏览器会自动绑定到最右侧那条[start]线 - 确保父级 grid 容器显式声明
direction，且未被子元素的dir="ltr"覆盖 - 不要依赖
grid-column-start: 1在 RTL 下“自动翻转”——它不会变，只是起始边变成了右边
