gap属性不支持calc()函数，只能接受长度值或normal关键字；需用CSS变量配合@media切换，或通过grid-template-columns中calc()间接实现动态间隙效果。
gap 属性本身不支持 calc()
直接写 gap: calc(10px + 2vw) 是无效的。CSS 规范中，gap 只接受单个长度值（如 10px、1rem）或关键字（如 normal），不接受计算表达式。浏览器会静默忽略该声明，回退到默认 gap: normal 或继承值。
常见错误现象：gap: calc(1rem + 4px) 在 DevTools 中显示为 strike-through，检查元素样式时根本看不到生效。
- 不能用于
gap、row-gap、column-gap的任何一种写法 - 也不能在
@container或媒体查询中“曲线救国”——gap不参与条件计算 - Grid/Flex 容器上设了
gap后再用calc()调整子项margin来模拟，容易引发外边距合并或尺寸溢出
想让“间距效果”动态变化，该动哪里？
真正可操作的位置是子项的 margin 或容器的 padding，配合 calc() 实现视觉等效。但要注意：这不再是语义上的“间隙”，而是靠留白撑开距离。
- 对 Grid 子项统一加
margin-right: calc(1vw + 8px); margin-bottom: calc(1vh + 4px);，并确保最后一列/行用:nth-child清除多余 margin - Flex 容器设
padding，子项用flex: 0 0 calc(33.333% - 12px)+margin-right: 12px模拟三等分布局 - 若需响应式 gap 缩放，优先用 CSS 变量 +
@media切换：--gap: 8px;→@media (min-width: 768px) { :root { --gap: 16px; } }，再通过gap: var(--gap)使用
grid-template-columns 配合 calc() 控制列间“有效间隙”
虽然 gap 不能算，但你可以把间隙逻辑“预埋”进轨道定义里，用 calc() 挤出空间。例如三栏均分 + 动态间隙：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
grid-template-columns: calc((100% - 2 * var(--gap)) / 3) calc((100% - 2 * var(--gap)) / 3) calc((100% - 2 * var(--gap)) / 3);
这里 --gap 是你用 @media 或 JS 控制的变量，calc() 算的是每列净宽，间接实现“间隙越大，列越窄”。注意：2 * var(--gap) 是因为两个间隙夹在三列之间。
- 必须配
gap: var(--gap)才能对齐，否则视觉错位 - 不要省略
var(--gap)的单位（如8px），否则calc()加减运算会因量纲不匹配而失效 - 这种写法在小屏下可能让列宽跌破最小可读宽度，建议外层套
minmax(320px, ...)
真正卡住人的不是语法，是上下文依赖
calc() 在 grid-template-columns 里能用，在 gap 里不能用，差别不在函数本身，而在属性是否接受“计算后的长度值”。很多开发者试了一堆组合后放弃，其实是没意识到：CSS 属性的支持列表是硬性限制，不是浏览器 bug。
更隐蔽的问题是——当你用 calc() 算列宽时，如果父容器 width 本身是 fit-content 或未设明确尺寸，100% 就没有参照系，整个计算结果为 auto 或 0。这种失效不会报错，只会默默不渲染。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
