calc() 是唯一能真正参与响应式分栏计算的 CSS math 函数，需显式计算列宽=(容器可用宽度−gap总和)/列数，其中gap总和=(列数−1)×gap值，并注意单位统一、box-sizing设置及浏览器兼容性限制。
calc() 是唯一能真正参与响应式分栏计算的 CSS math 函数
浏览器原生支持的 calc() 是目前唯一可用于盒模型动态尺寸计算的 math 函数；min()、max()、clamp() 虽属 math 函数家族，但它们不直接参与“列宽 + 间隙”的联动运算，仅适合边界控制。想让三栏在 320px 到 1920px 间自动适配列数与间距，必须靠 calc() 拆解容器宽度、列数、gap 三者关系。
常见错误是把 gap 直接写进 calc() 分母或忽略单位混用：calc(100% / 3 - 20px) 看似合理，但若父容器有 padding 或 border，实际可用宽度就不是 100%；更隐蔽的是用 rem 或 em 做 gap 值却没同步重设根字体——这会导致列宽随文本缩放意外崩塌。
- 列数变化必须配合媒体查询或容器查询（
@container），calc()本身不判断断点 - gap 值建议统一用
px或rem，避免与百分比混合时单位冲突 - 如果使用
grid-template-columns: repeat(auto-fit, minmax(...))，calc()不能嵌套其中——它只接受静态表达式，不解析函数返回值
用 calc() 实现等宽多列 + 动态 gap 的可靠写法
核心思路是：列宽 = (容器可用宽度 − 所有 gap 总和) ÷ 列数。关键在于算清 gap 总数：n 列需要 n−1 个 gap，所以 gap 总和 = (列数 − 1) × gap 值。这个逻辑必须显式写出，不能依赖 grid 自动分配。
例如 4 列布局，gap 设为 1.5rem，则单列宽度应为：calc((100% - 3 * 1.5rem) / 4)。注意这里用 3 * 而不是 4 - 1，因为 CSS 不支持表达式内运算符优先级外的算术（4 - 1 会被当作字符串拼接）。
立即学习“前端免费学习笔记（深入）”；
- 容器需设
box-sizing: border-box，否则 padding 会额外侵占100%宽度 - 若用
flex实现分栏，必须给子项设flex: 0 0 <calc表达式>，不能只靠width - 在 Safari 15.4 之前，
calc()中嵌套var(--gap)可能失效，建议降级为硬编码或用 JS 注入
clamp() 和 min()/max() 只适合做列宽兜底，不能替代 calc()
clamp() 常被误用于“让列宽在 200px 到 300px 之间自适应”，但它的输入是固定范围，无法感知当前有多少列。比如 clamp(200px, 100% / 3, 300px) 在小屏下仍强行三列，结果列宽被压到 200px 以下——clamp() 不阻止列溢出，只是限制单个值上下限。
真正该用 clamp() 的地方是控制最小列宽防坍缩：min-width: clamp(240px, 25vw, 320px)；而 min() 和 max() 更适合约束 gap：gap: max(1rem, 2vmin) 防止小屏 gap 过大。
-
clamp(MIN, FLEX, MAX)的 FLEX 部分不能是calc()表达式（部分旧版 Chrome 不支持） - 用
min()控制最大列数时，要搭配grid-auto-flow: column，否则无效 - 所有 math 函数在伪元素
::before/::after的content中均不可用
容器查询 + calc() 才能摆脱媒体查询硬编码
传统方案靠一堆 @media 切列数，维护成本高。用 @container 可让分栏逻辑绑定容器自身宽度：@container style(--cols: 3) { .grid { grid-template-columns: repeat(3, calc((100% - 2 * var(--gap)) / 3)); } }。前提是容器设了 container-type: inline-size 且定义了 --gap 自定义属性。
难点在于 Safari 对 @container 支持仍有限（iOS 16.4+），且 calc() 里引用 var(--gap) 在某些组合下会触发重排。稳妥做法是：用 JS 监听容器尺寸，动态更新 --cols 和 --gap，CSS 仅负责计算，不承担判断逻辑。
- 容器查询要求父容器有明确尺寸（不能是
height: auto或未设width的 flex item） - Firefox 目前不支持
@container中的style()查询，只能用normal类型 - 不要在
calc()中对var()做乘除运算（如calc(var(--gap) * 2)），IE 和旧 Edge 会直接失效
复杂点不在函数本身，而在如何让列数、gap、容器尺寸、box-sizing、单位系统这几层约束同时成立——漏掉任意一层，calc() 就会算出错误结果，且浏览器不会报错，只会静默渲染异常。
