chrome 56及更早版本完全不支持grid-row-gap，需用margin-bottom配合box-sizing: border-box降级，并通过双条件@supports检测确保兼容。
grid-row-gap 在 Chrome 56 及更早版本中根本不会生效——它被浏览器完全忽略，不是“渲染错位”，而是压根没读这条声明。
Chrome 56 及更早不支持 grid-row-gap，必须降级为 margin-bottom
Chrome 56 是 Grid Level 1 属性的分水岭：它只识别实验性前缀 display: -webkit-grid，但对 grid-row-gap、grid-column-gap 等所有 Level 1 布局属性均静默丢弃。DevTools 中该属性会显示为灰色或带删除线，getComputedStyle(el).gridRowGap 返回空字符串。
- 别指望 Autoprefixer 补全：
autoprefixer默认不处理grid-row-gap，即使配置grid: true，也仅对gap源码做展开，不会给grid-row-gap加前缀或转义 - 不能只写
grid-row-gap就以为能 fallback：Chrome 56 下它和gap一样，整条规则被跳过，连带父容器的display: grid都不生效 - 真实验证方式：用 BrowserStack 或 Docker 启动 Chrome 56，访问线上静态 HTML（非 localhost），在 Elements 面板手动确认
grid-row-gap是否出现在 Styles 里
用 margin-bottom 模拟行间隙时必须加 box-sizing: border-box
这是兼容性最强的 fallback 方案，但默认行为极易出错——不加 box-sizing 会导致子项实际宽度超出容器，触发意外换行或水平滚动条。
- 所有 grid item 必须显式设置
box-sizing: border-box，否则margin-bottom会叠加在内容宽高之外，破坏布局流 - 纵向间隙用
margin-bottom: 12px，但最后一行需清除：.item:nth-last-child(-n+3) { margin-bottom: 0; }（假设每行 3 项） - 父容器建议加
margin-bottom: -12px抵消最后一行多余空白；若父容器有overflow: hidden，优先改用子项正向 margin +:nth-child清除，避免渲染 bug
@supports 检测 grid-row-gap 不可靠，改用双条件检测
@supports (grid-row-gap: 0) 在旧版 Chrome 和部分 Android WebView 中解析异常，且 IE11/Safari ≤9 完全忽略整个 @supports 块。降级样式必须写在块外层，否则老浏览器无法执行。
- 正确写法：先写降级样式
.grid { display: flex; flex-wrap: wrap; }，再另起一段@supports (display: grid) and (grid-template-columns: 1fr) { .grid { display: grid; } } - 不要混用：
grid-row-gap: 12px和margin-bottom: 12px同时存在，老浏览器可能因解析冲突丢弃全部声明 - 单位优先用
px：rem或em在旧引擎中对 gap 类属性计算不稳定，Chrome 56 对相对单位的支持尤其薄弱
最常被忽略的一点：你看到的“正常布局”，大概率是 fallback 的 flex 或文档流在起作用，而不是 Grid 生效了。务必在真实旧环境里验证 computed style，而不是依赖本地开发服务器的缓存表现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
