可通过为网格线命名并让子元素引用名称来精确定位，比数字编号更直观易维护；在grid-template-columns/rows中用方括号定义线名，支持多名与复用；子元素用grid-column/row或grid-area通过线名定位，语义清晰、便于调整。
可以通过在网格容器中为网格线命名，再让子元素直接引用这些名称来精确定位，这样比用数字编号更直观、易维护。
在容器里定义带名字的网格线
使用 grid-template-columns 或 grid-template-rows 时，在尺寸值前后加上方括号，里面写上线名：
grid-template-columns: [sidebar-start] 200px [sidebar-end main-start] 1fr [main-end];grid-template-rows: [header-start] 80px [header-end nav-start] auto [nav-end main-start] 1fr [main-end footer-start] 60px [footer-end];
每条线可以有多个名字（如 [sidebar-end main-start]），也支持重复使用同一名称，方便统一语义。
子元素用名字指定起止位置
给子元素设置 grid-column 或 grid-row 时，直接填入已命名的线名，格式仍是 起始线 / 结束线：
.sidebar { grid-column: sidebar-start / sidebar-end; }.header { grid-row: header-start / header-end; }.main { grid-column: main-start / main-end; grid-row: main-start / main-end; }
只要名字匹配，浏览器就能自动找到对应位置，无需计算数字编号。
配合 grid-area 一次性写全四边
如果上下左右都有命名线，可用 grid-area 合并设置，顺序是：行起 / 列起 / 行止 / 列止：
.footer { grid-area: footer-start / sidebar-start / footer-end / main-end; }
这样一行代码就完成二维定位，结构清晰，改布局时只需调整容器里的线名定义，所有子元素自动对齐。
命名要兼顾语义和复用性
线名不强制唯一，但建议按区域功能或内容角色来取，比如 nav-start、content-end、aside-top 等。避免纯数字缩写（如 c1、r3），否则失去命名意义。复杂布局中，一条线同时承载多个区域边界（如 [main-end sidebar-start]）很常见，也能提升灵活性。
