Less编译CSS grid-row属性异常：设置跨两行却显示为0.333333，求原因

DevOps 小满

2026-5-26

问题原因与解决方案

啊，这个坑我踩过！你遇到的问题根本不是CSS Grid语法错了，而是CSS预处理器（比如Sass/Less）把你的grid-row: 1 / 3当成除法运算编译了——这是预处理器语法和CSS Grid范围语法的冲突点。

像Sass这类预处理器里，/是默认的除法运算符。当你写1 / 3时，它会自动计算出结果0.333333，直接输出到编译后的CSS里，完全忽略了你原本想表达的Grid行范围逻辑。而你参考的CSS Grid指南里的语法是原生CSS的写法，本身是完全正确的。

这里给你几个实用的解决方案，按需选择：

方案1：用预处理器的unquote()函数（针对Sass）
把Grid行范围的字符串用unquote()包裹，告诉预处理器不要解析这个值，原样输出：
```
.example-class{ 
  grid-column: 1; 
  grid-row: unquote("1 / 3"); 
}
```
方案2：改用span语法替代范围写法
原生CSS Grid支持用span指定跨轨数量，这样既不会触发预处理器的除法运算，效果也完全一致：
```
.example-class{ 
  grid-column: 1; 
  grid-row: 1 / span 2; 
}
```
这个写法更直观，也能避免预处理器的语法冲突，我个人更推荐这个。
方案3：调整预处理器配置（进阶）
如果你用的是新版Sass，可以在配置里启用use-css-vars或者调整除法规则，让预处理器只在特定场景下解析/为除法，但这个操作稍复杂，适合项目级的统一调整。