calc()在grid-template-columns中整列消失是因为浏览器对语法极其严格：缺单位、无空格、括号不全或混用无单位数字会导致解析失败，整条声明静默降级为auto或0px。
calc() 在 grid-template-columns 里为什么整列消失
浏览器对 grid-template-columns 中的 calc() 表达式极其严格：只要有一个加减项缺单位、括号不全、或混入无单位数字，整个轨道就会退化为 auto 或 0px，对应列直接塌陷不可见。这不是渲染延迟，是解析失败后的静默降级。
-
calc(100% - 200px)✅ 合法 —— 两边都有单位，括号完整 -
calc(100%-200px)❌ 失效 —— 运算符缺空格，部分浏览器直接忽略整条声明 -
calc(100% - 2rem - 10)❌ 崩溃 ——10无单位，加减运算不接受纯数字 -
calc(1fr - 40px)⚠️ 风险高 —— Chromium 某些版本会触发高度跳变，Firefox 旧版直接 fallback 到auto
怎么写才能让一列“最小300px + 剩余全给另一列”
直接写 300px 1fr 不是“最小 + 剩余”，而是“固定 + 等分”。真要约束弹性上限，必须用 minmax() 包裹 calc()，且注意参数顺序和兼容性。
-
minmax(300px, calc(100% - 240px))✅ 主内容区最小 300px，最大不超过容器宽减去右侧固定栏（240px） -
minmax(300px, calc(100vw - 240px))✅ 更稳 —— 绕开父容器宽度依赖，直接锚定视口 -
minmax(300px, calc(100% - 240px)) 240px✅ 右侧固定，左侧自适应，且左侧有明确上下界 - 避免
minmax(1fr, calc(100% - 240px))—— Firefox v110 之前会 fallback 到max-content，列宽失控
repeat(auto-fit) 配合 calc() 动态铺满固定容器
当你要在 400px × 400px 的画布里塞满 16×16 或 32×32 的网格单元，别用 repeat(16, 1fr) —— 它会让总高度随行数“撑开”容器。正确做法是控制单个单元尺寸，让 Grid 自动算数量。
- 定义 CSS 变量：
:root { --canvas-size: 400px; --cell-count: 16; } - 写法：
grid-template-columns: repeat(auto-fit, calc(var(--canvas-size) / var(--cell-count))); - 必须配
grid-auto-rows: calc(var(--canvas-size) / var(--cell-count));，否则行高不一致 - 别在
repeat()里嵌套calc()做列数计算（如repeat(calc(100vw / 250px), 1fr)）—— CSS 不支持表达式驱动重复次数
哪些地方 calc() 是“假生效”，你以为它在算其实早被覆盖了
calc() 写得再准，也可能被更高优先级的布局规则吞掉。常见于 Flex/Grid 容器中子项的 width 属性，它根本没机会参与尺寸计算。
立即学习“前端免费学习笔记（深入）”；
- Flex 项目上设
width: calc(100% - 20px)，但没关flex-grow——flex算法会覆盖 width，calc 白写 - Grid 项目设
width: calc(100% - 20px)，但父容器用grid-template-columns: 1fr 1fr—— 宽度由轨道分配，自身 width 被忽略 - 绝对定位元素写
left: calc(100% - 20px)，但父容器没设position: relative—— 基准变成初始包含块，结果错位 - 调试时先看 computed 样式里 width 是否显示为
calc(...)，如果已变成auto或具体像素值，说明表达式非法或被覆盖
实际中最容易被忽略的是：calc() 不监听变化，只做一次计算；所谓“动态”，全靠你手动更新 CSS 变量或切换上下文。比如用 JS 改变 --cell-count 才能重绘网格密度，而不是指望浏览器自动感知 DOM 子元素数量。
