命名线是给网格轨道间的分隔线打标签，需用方括号包裹并置于轨道尺寸前后；同一名称可重复定义以支持跨段选取；引用时格式为“起始线名/结束线名”，可加数字后缀精确定位；隐式网格线无名，需用数字索引；响应式中各断点须独立维护命名线，避免语义混淆。
grid-template-rows/cols 里怎么给线起名
命名线本质是给网格轨道之间的分隔线打标签，不是给轨道本身命名。必须用方括号包裹名字，写在轨道尺寸前后——位置错了线就根本不会被定义。
-
grid-template-columns: [start] 1fr [content] 2fr [end]：定义了三条列线，start在第一轨道左，content在第一、二轨道之间，end在第二轨道右 - 同一名称可重复出现：
[sidebar] 200px [sidebar] 1fr [main] 1fr [main]会生成多条同名线，后续可用sidebar 1 / main 2这种语法跨段选取 - 名字里不能有空格或特殊符号，连字符可以：
[nav-start]合法，[nav start]会直接失效
grid-column/grid-row 里如何引用命名线
引用命名线时，grid-column 和 grid-row 的值格式是 起始线名 / 结束线名，中间用斜杠分隔；如果只写一个名字，默认向后跨一个轨道（即自动推导终点）。
-
grid-column: start / end→ 从start线开始，到end线结束（含中间所有轨道） -
grid-column: content→ 等价于content / content 2，占一个轨道宽 - 若某条线名重复多次，加数字后缀可精确控制跨度：
sidebar 1 / sidebar 2表示取第一个sidebar线到第二个之间 - 混用数字和名称会出错：
1 / content合法，但content / 2不合法——css 不允许一侧是名字、另一侧是数字索引
命名线和隐式网格线共存时的定位冲突
显式命名线只存在于 grid-template-rows 或 grid-template-columns 定义的范围内；超出部分由隐式网格生成，这些线没有名字，只能用数字索引（如 -1、3）访问。
- 当元素定位跨出显式网格（比如
grid-column: start / 5），后半部分无法匹配命名线，浏览器会回退到数字逻辑，但容易导致布局断裂 - 用
grid-auto-columns: [auto] 1fr可为隐式列轨道也添加命名线，但注意：这只会给新增的隐式轨道“开头”加线，不会补全整套命名体系 - 调试时用浏览器开发者工具的网格叠加层，勾选“显示线名”，能直观看到哪些线真被识别了——很多“不起作用”的命名其实是拼写不一致或漏了方括号
命名线在响应式布局中容易被忽略的陷阱
媒体查询里重定义 grid-template-columns 会覆盖原有命名线，旧名字在新布局里可能不存在、位置偏移，甚至变成无效名称（比如新定义里没写 [header]，那之前所有 header 引用都会回退到默认行为）。
立即学习“前端免费学习笔记（深入）”；
- 别指望名字能跨断点“继承”；每个断点都要独立确保关键线名存在且位置合理
- 避免在不同断点用同一名称指代不同语义的线（例如小屏时
[nav]是侧边栏，大屏时改成顶部导航区），维护成本会指数上升 - 复杂响应式场景下，不如用
grid-area配合命名区域（grid-template-areas），它对人更友好，也更容易与命名线配合使用
命名线真正省事的地方，是当你反复调整轨道数量却不想改一堆 2 / 4 这类数字索引时。但一旦涉及断点切换或多人协作，拼写一致性、命名语义稳定性、以及开发者工具里能不能一眼看清线的位置——这些才是实际卡住进度的地方。