命名轨道必须用空格包围的[name]语法声明，否则整条grid-template声明失效；引用时必须带方括号且大小写敏感；行列线隔离，需分别声明；重复命名生成带序号的线。

必须在 grid-template-columns 或 grid-template-rows 的轨道定义中，用空格包围的 [name] 语法声明，否则名字无效、布局静默失效。

命名位置和语法必须严格匹配解析规则

浏览器把 [name] 当作独立 token 处理，前后必须有空格。写成 1fr[main-start] 或 [main-start]1fr 都会被整个忽略——不是报错，而是整条 grid-template-columns 声明不生效，容器退化为普通块级元素。

• 1fr [main-start] 2fr [main-end] 1fr ✅ 合法：方括号前后有空格，紧贴尺寸
• [main-start] 1fr ✅ 合法：开头命名，第一列左侧线为 main-start
• 1fr [sidebar-start sidebar-end] 1fr ✅ 同一位置多个名，后续任一都可引用
• repeat(3, [col] 1fr) ✅ 自动生成 col 1、col 2、col 3

引用时漏掉方括号 = 白写

裸名如 main-start 不是变量也不是类名，浏览器会把它当关键字（比如 auto 或 span）处理，结果就是 grid-column: auto / auto —— 元素只占一列，且不报任何警告。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• grid-column: [main-start] / [main-end] ✅ 正确
• grid-column: main-start / main-end ❌ 静默失败
• grid-row: [header-start] / -1 ✅ 允许混用：命名线 + 负向索引
• grid-column: [Header-start] ❌ 大小写敏感，[header-start] 才有效

行列线完全隔离，不能跨方向复用

在 grid-template-columns 里写的 [sidebar-start] 是列线，只能用于 grid-column-start 等列方向属性；用在 grid-row 上毫无效果，也不会报错，只是回退到默认行为。

• 想让同一名字同时控制行列，必须分别在两个地方声明：
  grid-template-columns: [sidebar-start];
grid-template-rows: [sidebar-start];
• grid-template-areas 定义的是区域，不是线 —— "sidebar main" 不会生成 sidebar-start 这条线
• 重复命名如 [item] 1fr [item] 1fr 会生成 item 1 和 item 2，引用时得写 [item 2] 才能选第二条

最常被忽略的一点：命名本身不占空间、不影响渲染，删掉所有 [name] 只要尺寸值不变，页面看起来一模一样——但它决定了你改布局时是改一行代码，还是满屏找数字、反复刷新调试。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！