gap仅在display为grid或inline-grid的容器上生效，需用开发者工具确认父容器display值及浏览器兼容性，旧版safari和android webview不支持gap，须用row-gap/column-gap替代并确保列定义留出间隙空间。
父容器没设 display: grid
gap 只在真正的网格容器上起作用，不是写了 gap 就能生效。最常见的情况是：父元素实际是 display: block、display: flex，甚至被 JS 动态覆盖成其他值，但开发者误以为“用了 Grid”就自动启用 gap。
- 用浏览器开发者工具选中父容器 → 切到「Computed」面板 → 搜索
display，确认值确实是grid或inline-grid - 别写错值，比如
display: grid-flow、display: subgrid（它不支持 gap）都是无效声明 - 如果用了 CSS-in-JS 或框架（如 Tailwind），检查是否默认禁用了
gap，或被重置样式覆盖
Safari 14.0 及更早、Android WebView ≤75 不识别 gap
这些内核把 gap 当作未知属性静默忽略——不会报错，也不会 fallback，页面看起来就是“贴死”的。
- iPhone 12 若系统未升级到 iOS 14.5+，Safari 仍跑旧 WebKit 引擎；微信 X5、QQ 浏览器、部分安卓系统浏览器也卡在 Chrome 75 或更早
- 别靠“本地看着正常”判断，真机打开 Safari 开发者工具 → Computed 面板搜
gap，值为空或标着not supported就是实锤 - 必须改用
row-gap和column-gap分开写，且两个都得写：只写row-gap: 12px，列方向依然没间隙
grid-template-columns 写死像素，gap 没空间可分配
写了 gap: 16px 但没看到空隙？很可能列定义“挤满了”容器宽度，浏览器优先保证列宽，把 gap 压成 0。
- 例如：
grid-template-columns: 500px 500px，容器总宽刚好 1000px → gap 失效 - 解决方法不是调大容器，而是让列有弹性：
1fr 1fr或minmax(0, 1fr) 1fr，给 gap 留出生效余地 - 如果必须用固定宽，至少预留一点余量：
490px 490px+ 容器width: 1000px，gap 才能撑开
用 margin 模拟 gap 时漏掉关键样式
这是兼容性最强的 fallback，但默认行为会让子项撑破容器，导致换行错乱或意外滚动条。
- 所有 grid item 必须加
box-sizing: border-box，否则margin-right会让实际宽度超 100% - 横向间隙用
margin-right，最后一列要清除；纵向用margin-bottom，最后一行同理 —— 推荐用:nth-child清除，别手动加 class - 如果子项内容长（比如长文本或图片），必须加
flex-shrink: 0，否则margin-left会被压缩吞掉
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
