CSS中grid-template-columns的自定义方括号标识符有何作用？

这些方括号里的内容是网格线名称（Grid Line Names），属于CSS Grid布局的自定义标识符，核心作用是给网格轨道之间的分隔线命名，具体用途和效果如下：

核心用途：精准且直观地定位网格项 #

网格线名称最主要的价值是让你在布局网格项时，不用依赖抽象的数字索引（比如grid-column: 1 / 2），而是用语义化的名称指定位置，大幅提升代码的可读性和可维护性。

针对你给出的网格列定义，你可以这样定位页面元素：

.main-menu {
  /* 从main-menu线开始，到content线结束 */
  grid-column: main-menu / content;
}
.content-area {
  /* 从content线开始，到asides线结束 */
  grid-column: content / asides;
}

后续如果需要调整网格轨道的数量或宽度，只要网格线名称不变，你就不用修改网格项的定位代码，布局逻辑更稳定。

关于删除/替换后布局变化的原因 #

你提到删除这些名称或替换成0/auto会改变布局，这不是网格线名称本身的问题——这些名称只是附加在轨道尺寸前的“标记”，本身不占用空间，也不会影响轨道的尺寸计算。

问题出在操作逻辑上：原代码里[main-menu] 20%是“给列线命名为main-menu，后面跟着宽度20%的轨道”；如果你把[main-menu]直接替换成0或auto，就变成了定义多条轨道（比如0 20%），或者修改了当前轨道的尺寸（比如把20%换成auto），自然会导致布局变化。如果只是单纯删除方括号里的名称、保留20%，布局应该和原来完全一致。

其他实用特性 #

• 一条网格线可以绑定多个名称，比如[main-start content-start] 20%，定位时用任意一个名称都能指向这条线，适配不同的布局逻辑。
• 配合grid-template-areas使用时，网格线名称可以作为区域布局的补充，实现更细粒度的元素定位。

内容的提问来源于stack exchange，提问作者user1658543