<p>calc()不支持嵌套，正确写法是calc((100vw - 2rem) / 3)，需注意括号匹配、运算符空格，并结合min()或媒体查询设宽度下限，优先用gap控制间距，避免sub-pixel错位。</p>
calc(calc(100vw - 2rem) / 3) 为什么算出来不对？
因为 calc() 不支持嵌套，calc(calc(...)) 会直接失效，浏览器报语法错误或回退为初始值。实际想表达的是“容器宽度减去总边距后三等分”，得拆开逻辑。
- 正确写法是：用
100vw减固定边距（比如左右各1rem），再除以列数：calc((100vw - 2rem) / 3) - 注意括号必须成对，且运算符前后要留空格，否则
100vw-2rem会被当作无效token -
vw基于视口宽度，但卡片本身有 padding/margin/border，别忘了在宽度计算里预留这些空间
卡片间距用 margin 还是 gap？
优先用 gap——它专为网格/弹性布局设计，不会触发外边距合并，也不影响卡片自身盒模型。但得看容器是否支持。
- Grid 布局下：
display: grid+gap: 1rem最干净，gap会自动作用于行列间隙 - Flex 布局下：
gap在现代浏览器（Chrome 84+、Firefox 63+）已支持，但 IE 完全不支持，需降级用margin - 如果用
margin，记得处理最后一行/列的多余间距，常见做法是给子项加margin-right和margin-bottom，再用:nth-child清除末尾
vw 单位在小屏上导致卡片过窄怎么办？
vw 是纯比例单位，不做限制时，手机横屏（比如 414vw）可能让单张卡片宽达 130px，内容挤成一团。必须设下限。
- 用
min-width配合calc()：min-width: calc((100vw - 2rem) / 3)不行，因为min-width不能动态响应视口变化，得换思路 - 更稳妥的是结合
min()函数（支持 Chrome 115+、Safari 16.4+）：width: min(300px, calc((100vw - 2rem) / 3)) - 兼容老浏览器就用媒体查询兜底：
@media (max-width: 480px) { .card { width: 100%; } }
calc 计算结果被四舍五入导致错位？
CSS 计算值最终会转为像素，而浏览器渲染时对 sub-pixel 的处理不一致，尤其多列并排时，累计误差可能让最后一列掉行。
立即学习“前端免费学习笔记（深入）”；
- 避免用
vw算出带小数的宽度，比如calc(100vw / 3)在 375px 视口下得 125.333...px，某些浏览器会向下取整 - 把边距也纳入
calc统一计算，例如三列 + 两处1rem间隙：width: calc((100vw - 2rem) / 3)，比分别设width和margin更可控 - 真遇到错位，加
box-sizing: border-box并确认所有卡片没意外的outline或transform干扰布局流
最麻烦的不是写对 calc，而是不同设备下 vw 包含滚动条宽度与否、缩放行为、以及 gap 和 margin 在嵌套 flex/grid 中的叠加逻辑——这些细节不测真机根本发现不了。
