calc()在grid-template-columns中失效是因解析失败而非bug，任一单位缺失、空格遗漏或括号不全均导致整条声明降级为auto或0px，列不可见。
grid-template-columns里calc()整列消失，不是bug是解析失败
只要有一个加减项缺单位、括号不全、或混入无单位数字，整条grid-template-columns声明就会静默降级为auto或0px，对应列直接不可见。这不是渲染延迟，是CSS引擎根本没解析成功。
-
calc(100% - 200px)✅ 合法：两边都有单位，括号完整 -
calc(100%-200px)❌ 失效：运算符-前后缺空格，部分浏览器直接跳过整条规则 -
calc(100% - 2rem - 10)❌ 崩溃：10无单位，加减运算不接受纯数字 -
calc(1fr - 40px)⚠️ 高风险：Chromium某些版本触发高度跳变，Firefox旧版fallback到auto
实现“最小宽度 + 剩余空间”必须用minmax()包裹calc()
写300px 1fr不是“最小300px + 剩余”，而是“固定300px + 等分剩余”，实际效果常偏离预期。真要约束弹性上限，得靠minmax()和calc()配合，且注意参数顺序。
-
minmax(300px, calc(100% - 240px))✅ 主内容区最小300px，最大不超过容器宽减右侧固定栏（240px） -
minmax(300px, calc(100vw - 240px))✅ 更稳：绕开父容器宽度依赖，直接锚定视口 -
minmax(1fr, calc(100% - 240px))❌ Firefox v110之前fallback到max-content，列宽失控 - 别在
repeat()里嵌套calc()算列数（如repeat(calc(100vw / 250px), 1fr)）——CSS不支持表达式驱动重复次数
用CSS变量+calc()时，var()不能省，单位不能丢
calc()不认识裸变量名，--gap * 2这种写法浏览器直接忽略整条声明，DevTools只显示Invalid property value，连报错都看不到。
- 必须显式写成
calc(var(--gap) * 2)✅，且--gap定义必须带单位（如--gap: 20px） -
calc(var(--gap) * var(--scale))⚠️ 风险高：--scale必须是纯数字（如1.5），否则20px * 1.2px单位冲突 - 避免嵌套
calc()（如calc(calc(100% - var(--gap)) / 3)）：Safari 15.4之前完全不支持，且调试困难 - 推荐拆解为中间变量：
--content-width: calc(100% - var(--gap));，再用calc(var(--content-width) / 3)
视口单位混用calc()容易抖动，dvh是更稳的替代
vh和calc()一起用，在iOS Safari和Android WebView里常因地址栏高度计算问题导致尺寸跳变。滚动时100vh突变，calc(100vh - 60px)跟着抖。
立即学习“前端免费学习笔记（深入）”；
- 优先用
dvh（dynamic viewport height）：calc(100dvh - 60px)✅ Chrome 105+/Safari 16.4+支持，始终排除地址栏 - 老设备兜底：用JS注入
:root变量（如--safe-height: 100vh），滚动时动态更新 - Grid中慎用
calc(1fr - 40px)：部分Chromium版本会触发layout bug，表现为高度跳变或空白 - 加减运算单位必须一致：
calc(100px + 2rem)在旧版Safari可能失效，现代方案优先用clamp()替代复杂计算
复杂点不在calc本身，而在它依赖的上下文是否稳定——父容器有没有明确width或max-width，视口单位是否被地址栏干扰，CSS变量是否带单位。这些细节漏掉一个，整行Grid就塌了。
