gap属性不支持百分比单位，浏览器会静默忽略；应使用calc()配合视口单位或通过子项padding模拟响应式间隙。
gap 百分比值在 Grid 中根本不起作用
CSS Grid 的 gap 属性不支持百分比单位，写成 gap: 2% 或 row-gap: 5% 会被浏览器直接忽略——它只接受 px、em、rem、vh 等绝对或视口单位，但**不包括 %**。这是很多人查文档没细看就踩的坑。
原因在于：gap 是网格容器内“轨道间隙”，不是相对于父容器宽高的布局尺寸，没有明确的参考盒（unlike width 或 padding），所以百分比无从计算。
- 浏览器会静默丢弃无效的百分比
gap值，控制台也不报错，容易误以为“生效了” - Flexbox 的
gap同样不支持百分比，规则一致 - 若真需要“随容器缩放”的间隙，得换思路：用
calc()搭配视口单位或配合容器 padding 模拟
用 calc() + 视口单位实现响应式 gap 效果
虽然 gap 不能写百分比，但可以用 calc() 把视口单位（如 vw）和固定值混合，做出视觉上“随宽度变化”的间距感。关键不是“真百分比”，而是让数值随屏幕缩放可变。
例如：想让间隙在小屏约 8px、大屏约 24px，可这样写：
立即学习“前端免费学习笔记（深入）”；
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: calc(0.5vw + 6px);
-
0.5vw在 320px 宽屏幕下 ≈ 1.6px，在 1440px 下 ≈ 7.2px，叠加6px后实际 gap 范围约 7.6px–13.2px，足够形成响应梯度 - 避免用纯
vw（如gap: 2vw），否则在超小屏（比如手机横屏转竖屏瞬间）可能缩到 0，视觉断裂 - 别对
gap做媒体查询覆盖——calc()本身已具备连续响应能力，更轻量也更易维护
真正要“按父容器比例缩放”，得靠 padding 模拟 gap
当设计稿明确要求“间隙 = 容器宽度的 2%”，而你又必须严格遵循该比例时，gap 就不是正确工具。此时应放弃 gap，改用子项自身的 padding 或 margin 配合 box-sizing: border-box 来模拟。
做法是：关闭 Grid 的 gap，让每个网格项主动留白：
.grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.grid > * { padding: 0 1%; } /* 左右各 1%，合计 2% 间隙感 */
.grid > *:nth-child(3n) { padding-right: 0; }
.grid > *:nth-child(3n+1) { padding-left: 0; }- 注意清除首列左 padding 和末列右 padding，否则边缘多出额外空白
- 这种方案会让内容区域实际可用宽度变窄，需在
minmax()或列宽计算中预留空间 - 如果网格项有背景色或边框，padding 模拟 gap 更自然；但若有 hover 扩展效果，需额外处理 padding 区域的交互响应
移动端断点下 gap 值突变容易引发重排错位
用媒体查询切换 gap 数值（比如从 gap: 16px 切到 gap: 8px）看似合理，但若同时存在 minmax() + auto-fit，小幅度 gap 变化可能导致列数突变——比如刚好卡在 3 列变 2 列的临界点，用户会看到内容“跳一下”。
- 测试时务必在真实设备或 Chrome 设备模拟器中拖动宽度，观察是否出现列数抖动
- 更稳的做法是：保持
gap值不变，仅通过调整minmax()的最小宽度来控制列数，把视觉疏密交给列宽而非间隙 - 如果设计强制要求 gap 缩小，建议搭配
transition: gap 0.2s ease，至少让变化平滑些
实际项目里最常被忽略的，是把“视觉等比缩放”和“CSS 布局机制”混为一谈——gap 就不是为百分比设计的，硬塞只会增加调试成本。选对工具比调参更重要。
