能否使用calc()函数结合grid-template-columns属性计算网格列份数？

不行，你当前的写法没法得到注释里8fr 12fr的效果。

问题出在CSS语法规则上：calc()函数的计算结果必须直接包含单位，你写的calc(9 - 1)fr相当于先算出数字8，再硬接个fr，浏览器会把这当成无效值，网格列会自动 fallback 到默认的分配逻辑。

要实现你想要的计算效果，得把fr放进calc()里面，正确写法是：

.classname {
    display: grid;
    grid-template-columns: calc(9fr - 1fr) calc(13fr - 1fr);
    /* 这就等同于 8fr 12fr */
}

如果是结合CSS变量的动态场景，比如需要根据变量调整列数，写法可以是这样：

.classname {
    --col1: 9;
    --col2: 13;
    display: grid;
    grid-template-columns: calc(var(--col1) * 1fr - 1fr) calc(var(--col2) * 1fr - 1fr);
}

要是只是简单的静态数字运算，直接写8fr 12fr当然最省事，但涉及动态计算时，一定要保证单位在calc()的表达式范围内。

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