如何正确使用CSS calc()实现响应式网格列宽？

云原生阿岚

2026-7-14

问题原因与解决方案

报错原因

你写的calc公式里，(100% - var(--offset))是带单位的长度值（比如容器宽1000px时，结果是970px），而CSS的calc除法规则要求除数必须是无单位的纯数字，用带单位的值做除数就会触发“one operand must be a number”错误。

最优解决方案：用Grid的fr单位实现比例布局

你的核心需求是保持两列424px:608px的比例并自适应，Grid的fr单位天生就是干这个的——它会自动分配容器的可用空间，同时自动处理gap、padding的影响，完全不用复杂的calc计算。

先简化比例：424和608的最大公约数是8，简化后为53:76，直接用对应的fr值即可：

:root {
  --offset: 30px;
}

.grid-cols-custom {
  display: grid;
  /* 按424:608的简化比例设置列宽 */
  grid-template-columns: 53fr 76fr;
  gap: var(--offset); /* 如果offset是列间距 */
  box-sizing: border-box; /* 确保padding不会撑大容器 */
  padding: var(--offset); /* 如果需要容器内边距 */
}

兼容/替代方案：修复calc运算逻辑

如果一定要用百分比计算，先把宽度值转成无单位的比例数值，再做运算（确保除数是纯数字）：

:root {
  /* 只保留数值，去掉单位 */
  --col1-base: 424;
  --col2-base: 608;
  --total-base: calc(var(--col1-base) + var(--col2-base));
  --offset: 30px;
}

.grid-cols-custom {
  display: grid;
  grid-template-columns:
    calc((var(--col1-base) / var(--total-base)) * 100%)
    calc((var(--col2-base) / var(--total-base)) * 100%);
  gap: var(--offset);
  box-sizing: border-box;
  padding: var(--offset);
}