Chrome 83及更早版本不解析gap属性，DevTools中显示灰色删除线、getComputedStyle返回空字符串或"normal"；需用@supports (display: grid) and (row-gap: 0)双条件检测，降级样式须写在@supports外层。
Chrome 83 及更早版本压根不解析 gap，不是“失效”，是 CSS 引擎直接跳过该声明——它连语法校验都不走，DevTools 里显示灰色带删除线，getComputedStyle(el).gap 返回空字符串或 "normal"。
怎么确认真是 Chrome 版本问题？
别查 caniuse，三步实操验证：
- 打开 DevTools → Elements 面板选中 Grid 容器 → Styles 里
gap显示灰色或带删除线，基本坐实 - 切到 Computed 面板搜
gap，值为空或标着not supported - 控制台运行
getComputedStyle(document.querySelector('.grid')).gap，返回""或"normal"就是未生效
为什么 autoprefixer 和 @supports 都救不了？
autoprefixer v9+ 已彻底移除对 gap 的处理能力，不会生成 grid-row-gap 或 -webkit-grid-gap；@supports (display: grid) 在 Chrome 56 及更早中整块被忽略，而 Chrome 83 虽支持 display: grid，但对 gap 仍静默丢弃——它识别了容器，却跳过了间距声明。
真正能兜底的检测必须双条件：@supports (display: grid) and (row-gap: 0)。单用 @supports (gap: 0) 在 Safari 14.1 这类环境会误判为 true，但实际无效。
用 margin 模拟 gap 的实操要点
加前缀没用，-webkit-grid-gap 在 Chrome ≤83 中同样被忽略。唯一可控路径是负边距 + 内边距组合：
- 横向间隙：容器加
margin-left: -8px; margin-right: -8px，每个子项加padding-left: 8px; padding-right: 8px - 纵向间隙：容器加
margin-top: -8px; margin-bottom: -8px，子项加padding-top: 8px; padding-bottom: 8px - 子项必须设
box-sizing: border-box，否则 padding 会撑破容器宽度 - 子项默认
min-width: auto，内容稍长就溢出——漏掉min-width: 0是布局崩坏最常见原因 - 换行后首列/首行多出一倍间隙？用
.grid > *:nth-child(3n+1) { padding-left: 0; }清零
真正容易被忽略的点
gap 失效时，很多人试图用 grid-row-gap 替代，但它在 Chrome ≤83 中一样被静默忽略；也有人把降级样式写进 @supports 块里，结果 IE11 和旧 Safari 根本看不到 fallback——降级规则（比如 display: flex + margin）必须写在 @supports 外层。另外，grid-template-areas 在 Chrome 83 中也会被跳过，若同时使用，整个网格可能退化为流式布局，此时仅修复 gap 仍无法恢复结构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
