CSS Grid 的 gap 不支持百分比单位，浏览器会静默忽略 gap: 5% 等写法；其合法值仅为长度单位或无单位数值，W3C 规范已移除 percentage 类型。
百分比单位（如 gap: 5%）在 CSS Grid 中**根本不会生效**——浏览器会直接忽略它，不是兼容性问题，而是语法不合法。
gap 不接受百分比值
gap、row-gap、column-gap 三个属性只接受长度单位（px、em、rem、vh 等）或无单位数值（用于 grid-row-gap 的旧规范，已废弃），**明确不支持百分比**。写 gap: 5% 后，开发者工具的「Computed」面板里该值会显示为 unset 或干脆不出现，说明被解析器静默丢弃。
- W3C 规范中
gap的取值类型是<length> | <percentage>？错——最新 Level 2 规范（2026 年有效）已将<percentage>从允许值中移除 - Chrome 128+、Firefox 125+、Safari 17.6 均不解析
gap: 10%，连警告都不报 - 别试
calc(5% + 4px)：只要表达式里含%，整个值就无效
为什么 rem/em 在高分屏上“看起来像百分比失效”
很多人误以为 gap: 1rem “在 2K 屏上变小了”，其实是 rem 基准被系统缩放干扰，导致物理尺寸缩水——这不是 Grid 问题，而是根字号没适配高 DPI。
- Windows 125% 缩放或 macOS Retina 下，浏览器可能未同步放大
html { font-size: 16px }，结果 1rem 实际渲染不足 16px - 用
clamp()替代固定rem：gap: clamp(0.5rem, 0.75rem + 0.5vmin, 1.25rem)，把视口宽度和最小物理尺寸纳入计算 - 更稳方案：改用
vmin或dppx媒体查询，例如@media (-webkit-min-device-pixel-ratio: 2) { .grid { gap: 1.5rem; } }
需要弹性间距？用 grid-template-rows/columns + minmax()
真要实现“随容器宽度变化的间距”，不要硬套 gap，而是把间距逻辑下沉到轨道定义层：
立即学习“前端免费学习笔记（深入）”；
-
grid-template-columns: repeat(auto-fit, minmax(calc(100% / 3 - 12px), 1fr))—— 用calc()在列宽里预留间隙空间 -
grid-template-rows: minmax(200px, 1fr) 12px minmax(200px, 1fr)—— 把固定间隙（如12px）单独设为一行，比依赖gap更可控 - 若需响应式间隙，配合
@container查询（Chrome 117+ 支持）：@container (width > 600px) { .grid { gap: 24px; } }
最常被忽略的一点：gap 的“弹性”错觉，往往源于开发者试图用它解决本该由网格轨道结构承担的责任——间隙不是装饰，它是布局骨架的一部分；一旦开始想用百分比控制它，就应该回头重审 grid-template-* 是否真正表达了内容的空间意图。
