Firefox中能否用同级类设置自定义CSS属性？网格列异常原因

问题描述 #

我有两个网格组件，一个显示3列，另一个显示4列，通过不同CSS类设置--cols自定义属性。相关代码在Chrome中运行正常，但Firefox中两个网格仅显示1列。同时想确认：Firefox中能否通过同级类设置自定义CSS属性？

原始代码 #

CSS代码 #

.base-grid {
  --w-max: 175px;
  --gap: 0.5rem;
  display: grid;
  grid-template-columns: repeat(var(--cols), min(var(--w-max), calc(100% - (var(--cols)-1) * var(--gap)) / var(--cols)));
  gap: var(--gap);
  justify-content: center;
}

.a-grid {
  --cols: 3;
}

.b-grid {
  --cols: 4;
}

.base-grid>div {
  height: 50px;
  background: red;
}

HTML代码 #

<div class="base-grid a-grid">
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="base-grid b-grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

原因分析 #

Firefox在解析CSS变量与calc()结合的复杂表达式时，存在解析优先级的问题。原始写法中calc(100% - (var(--cols)-1) * var(--gap)) / var(--cols)的结构，Firefox会错误地将var(--cols)作为非数值类型处理，导致整个min()函数的计算结果异常，最终使得网格列宽不符合预期，仅显示1列。而Chrome对这种表达式的解析逻辑更宽松，能正确识别变量的数值属性并完成计算。

解决方案 #

调整grid-template-columns的表达式，给calc()内部的计算逻辑增加括号，明确运算优先级，确保Firefox能正确解析变量的数值计算：

.base-grid {
  --w-max: 175px;
  --gap: 0.5rem;
  display: grid;
  /* 重点修改：将calc内的分子部分用括号包裹，明确计算优先级 */
  grid-template-columns: repeat(var(--cols), min(var(--w-max), calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols))));
  gap: var(--gap);
  justify-content: center;
}

修改后，Firefox就能正确识别--cols的数值，计算出正确的列宽，和Chrome表现一致。

关于同级类设置自定义属性的问题 #

Firefox完全支持通过同级类设置自定义CSS属性，你的原始写法中.a-grid和.b-grid作为base-grid的同级类设置--cols变量的方式是完全合法且有效的，问题并非出在变量的设置方式上，而是表达式的解析逻辑。

内容的提问来源于stack exchange，提问作者Some Noob Student