如何在CSS Grid中设置网格线名称以提高代码可读性？-css教程-PHP中文网

grid-template-areas定义命名区域，非网格线；命名网格线须用grid-template-columns/rows中[名称]语法声明，二者语义隔离、不可混用，引用时必须带方括号，裸名会被浏览器忽略。

如何在css grid中设置网格线名称以提高代码可读性？

grid-template-areas 与命名网格线的区别

很多人误以为 grid-template-areas 是给网格线起名的方式，其实它定义的是**命名区域（area）**，不是线。真正的命名网格线要靠 grid-template-columns 和 grid-template-rows 中的括号语法：[name]。命名线和命名区域是两套机制，混用容易出错。

用 [name] 语法在轨道定义中声明网格线

命名线必须写在轨道尺寸前后，且每条线只能有一个名字（但可重复出现）。比如：

.container {
  display: grid;
  grid-template-columns: [start] 1fr [main] 2fr [sidebar] 1fr [end];
  grid-template-rows: [header] 60px [content] 1fr [footer] 40px;
}

这样就能在项目上直接使用这些名字定位，而不是记数字线号。

GenFlow

GenFlow是一款AI智能体工具，全球首个全模态、全端通用AI智能体。

下载

grid-column: start / main 表示从 [start] 线开始，到 [main] 线结束（不包含该线）
同一名称可在多处出现，比如 [sidebar] 出现在第2列末和第3列初，它们是同一条线
不能把名字写在 repeat() 外部再包裹——repeat(3, [col] 1fr) 是合法的；但 [col] repeat(3, 1fr) 会失效
命名线不影响布局计算，只是别名，所以不会增加渲染开销

命名线 + grid-area 实现语义化区域映射

当同时使用命名线和 grid-template-areas 时，二者可联动：区域的边界自动绑定到同名线。例如：

.container {
  grid-template-areas:
    "hd hd hd"
    "sd ct ft"
    "sd ct ft";
  grid-template-columns: [sd] 200px [ct] 1fr [ft] 100px;
  grid-template-rows: [hd] 80px [ct] 1fr [ft] 60px;
}

这里 grid-area: hd 的项目会自动跨 [hd] 到 [ct] 行线、[sd] 到 [ft] 列线——前提是名字完全一致且位置匹配。