grid-template-rows/columns能否用数值？动态生成网格样式失效排查

这不是bug，而是CSS网格线名称的命名规则限制导致的问题。

CSS中，网格线的名称属于CSS标识符范畴，有严格的命名要求：

• 标识符不能以数字开头（像0900这种直接用数字作为名称开头是不允许的）
• 合法标识符必须以字母（a-z/A-Z）、下划线（_）或者转义字符开头，后续可包含数字、字母、下划线等字符

当你使用[0900]这类数字开头的网格线名称时，浏览器会判定整个gridTemplateRows值无效，直接忽略这个样式设置，所以控制台打印和开发者工具里都会显示为空结果。

解决办法 #

最简单的方式是给数字开头的网格线名称添加字母前缀，比如[t0900]、[row0900]，这样就能符合CSS标识符规范。修改后的代码示例：

this.myElement.style.gridTemplateRows = "[xHeader] 2fr [t0900] 1fr [t0930] 1fr [t1000] 1fr [t1030] 1fr [t1100] 1fr [t1130] 1fr [t1200] 1fr";

修改后再执行console.log(this.myElement.style.gridTemplateRows)，就能看到正确的样式值被输出，开发者工具里也能正常显示这个样式设置了。

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