命名线必须写在grid-template-columns/rows的轨道定义中，中括号前后需空格，如1fr [main-start] 2fr；错误写法如1fr[main-start]2fr会被浏览器丢弃；引用时须方向匹配、拼写一致且为字面量。
grid-template-columns/rows 里怎么写命名线才生效
命名线不是加个属性就能用的，必须直接写在 grid-template-columns 或 grid-template-rows 的轨道定义中，且中括号前后必须有空格。浏览器只认“独立 token”，[name] 紧贴尺寸会直接丢弃整条声明。
常见错误写法：1fr[main-start]2fr、[main-start]1fr、1fr[main-start]2fr —— 这些全无效，DevTools 里该声明会变灰 strikethrough。
正确写法示例：
grid-template-columns: 1fr [main-start] 2fr [main-end] 1fr; grid-template-rows: [header-top] 80px [header-bottom] auto [footer-top];
-
[main-start]和[main-end]是列方向命名线，只能用于grid-column相关属性 - 同一位置可塞多个名：
1fr [sidebar-start sidebar-left] 2fr - 名字区分大小写：
Header-start≠header-start - 名字不能含空格、点号、斜杠，连字符
-和下划线_安全
grid-column / grid-row 引用命名线时容易踩哪些坑
引用错方向、拼写不一致、或指望变量生效，是三大静默失效原因——浏览器不报错，但元素退回默认位置。
典型翻车场景：
- 把列线名用在
grid-row-start上，比如grid-row-start: main-start（main-start是列线，无效） -
grid-column: main-start / main-end写对了，但父容器没定义grid-template-columns，线根本不存在 - 用 CSS 变量：
grid-column-start: var(--main-start)—— 不生效，命名线必须是字面量 - 大小写或连字符不一致：模板里是
[user-profile]，却写成grid-area: user_profile
调试建议：打开 DevTools → Elements → 查看元素 computed 样式中 grid-column 值是否为 auto；如果是，说明命名线未匹配或未定义。
repeat() 批量命名时怎么避免序号混乱
repeat() 生成同名线时，浏览器自动编号，但默认只取第一条，不写序号极易跨错轨道。
比如：
grid-template-columns: repeat(4, [col] 1fr);
实际生成 col 1、col 2、col 3、col 4 四条线。此时：
-
grid-column: col→ 等价于col 1，从第 1 条线开始 -
grid-column: col 2 / col 4→ 明确跨第 2 到第 4 条线（即中间两列） -
grid-column: col 3 / span 2→ 从col 3开始，跨 2 条轨道
不加序号的引用风险高，尤其当后续增减列数时，col 指向可能偏移。推荐显式编号或改用语义化区域名（如 [col-a]、[col-b]）替代纯数字批量命名。
命名线和 grid-template-areas 混用时要注意什么
两者可以共存，但作用域和生效条件完全不同：命名线靠 grid-template-columns/rows，区域靠 grid-template-areas，二者互不替代。
关键约束：
-
grid-area的值必须与grid-template-areas中的字符串完全一致（含大小写、连字符），且不能带引号 - 命名线不能“自动创建”区域；区域也不能反向生成命名线
- 想让一个名字既作线又作区域，得两边都定义：
grid-template-columns: [sidebar-start]; grid-template-areas: "sidebar content";，再给子元素设grid-area: sidebar和grid-column: sidebar-start - 多行
grid-template-areas必须每行单词数一致，否则整条声明失效
真正省事的组合方式是：用命名线划分骨架（如 [main-start]），再用 grid-template-areas 描述语义区块（如 "header header" "nav main"），最后让组件通过 grid-area 挂载——这样改布局只需动模板，不碰具体元素样式。
transform 或其他可动画属性，别指望网格线移动自己能过渡。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
