<p>calc() 在 grid-template-columns 中需确保所有加减项带单位、括号完整、不嵌套函数，避免塌陷；正确写法如 200px calc(100% - 200px)，禁用无单位值或 1fr 减法，兼容性问题需用 dvh 或 CSS 变量兜底。</p>
calc() 在 grid-template-columns 里怎么写才不塌陷
直接写 calc() 没问题，但多数人漏掉单位换算和括号优先级，导致浏览器解析成 auto 或 0px，整列消失。CSS Grid 对 calc 表达式非常严格：只要有一个操作数单位缺失、或加减混合了无单位值，整个 track 就失效。
- 必须保证所有参与加减的项都有明确单位（
1fr、200px、5vw可混用；但1fr + 20错误） -
calc()外层不能套其他函数（比如minmax(calc(100% - 200px), 1fr)合法，但minmax(1fr, calc(100% - 200px))在旧版 Safari 会降级为minmax(1fr, auto)） - 避免在
grid-template-rows中对1fr做减法（如calc(1fr - 40px)），部分 Chromium 版本会触发 layout bug，表现为高度跳变或空白
正确示例：grid-template-columns: 200px calc(100% - 200px); —— 左侧固定，右侧自适应；若需留边，写成 calc(100% - 200px - 2rem)，别省括号。
用 calc() 实现“最小宽度 + 弹性填充”布局
这是最常用也最容易翻车的场景：想让一列至少占 300px，剩余空间全给另一列。很多人直觉写 300px 1fr，但这不是“最小 + 剩余”，而是“固定 + 等分”。真要动态约束，得靠 minmax() 和 calc() 配合。
-
minmax(300px, 1fr)是安全写法，但无法预留间隙；若需左右各留16px，就得用minmax(300px, calc(100% - 32px)) - 注意：Firefox 对
calc()在minmax()第二参数中的支持比 Chrome 晚两个大版本（v110+ 才稳定），低版本会 fallback 到max-content - 不要在
repeat()里嵌套calc()做动态列数（如repeat(calc(100vw / 250px), 1fr)），CSS 不支持表达式驱动重复次数
实用组合：grid-template-columns: minmax(300px, calc(100% - 240px)) 240px; —— 主内容区最小 300px，最大撑满减去右侧固定栏宽度。
立即学习“前端免费学习笔记（深入）”；
calc() 与视口单位混用时的兼容性雷区
vh、vmin 看似方便，但和 calc() 一起用，在 iOS Safari 和 Android WebView 里容易出尺寸抖动。根本原因是这些环境把地址栏高度算进 100vh，滚动时值突变，而 calc(100vh - 60px) 会跟着跳。
- 替代方案：用
dvh（dynamic viewport height），Chrome 105+/Safari 16.4+ 支持，它始终排除地址栏；写成calc(100dvh - 60px) - 老设备兜底：用 JS 注入 CSS 变量（
:root { --safe-height: 100vh; }），滚动时更新，再在 Grid 中引用calc(var(--safe-height) - 60px) - 绝对别写
calc(100vh - 100vh * 0.1)—— 无意义且增加解析负担，直接写90vh
检查是否生效：打开 DevTools → Elements → 计算样式，搜 grid-template-columns，看值是否被解析为具体像素而非 calc(...) 字符串（后者说明表达式未求值）。
响应式中 calc() 的断点穿透问题
很多人以为媒体查询里重写 grid-template-columns 就够了，结果发现小屏下 calc(100% - 200px) 算出来负数，整行崩溃。这是因为百分比基于父容器宽度，而父容器可能还没设宽（比如 div 默认 width: auto）。
- 确保父容器有明确宽度上下文（
width: 100%或max-width），否则100%在 calc 中退化为0px - 移动端慎用
100%减固定值：当屏幕 calc(100% - 200px) 会是负值，Grid 规范要求忽略该 track - 更健壮的写法是用
minmax()包一层：minmax(0, calc(100% - 200px))，强制下限为 0
真正难处理的是嵌套 Grid：内层 calc() 依赖外层 track 尺寸，而外层尺寸又受内层内容影响，容易形成循环依赖。这种时候，宁可拆成两层独立 Grid，也别硬塞一个万能 calc。
