gap已取代grid-gap，需确保父容器为display: grid，支持px/vh等单位但慎用%和calc()，避免与margin叠加，且仅作用于直接子项。
grid-gap 已被弃用，改用 gap
现在所有主流浏览器都支持 gap，而 grid-gap 是旧写法，虽仍能用但不推荐。如果你在调试时发现间距没生效，第一反应应该是检查是否误用了已废弃的属性名。
-
gap同时作用于行间距（row gap）和列间距（column gap），写一个值即等效设置两者 - 写两个值时，第一个是行间距，第二个是列间距，例如：
gap: 10px 20px - 若需单独控制，可用
row-gap和column-gap，它们仍被广泛支持且语义更清晰
gap 不起作用？先确认父容器是 display: grid
gap 只对 display: grid 或 display: inline-grid 的容器生效，对 flex、block 或 table 完全无效。常见错误是给子元素加了 gap，或者父元素只写了 display: -ms-grid（IE 旧语法）却没配 -ms-grid-column-gap 等前缀。
- 检查父元素 computed style 中是否真有
display: grid - 避免在 grid container 上同时使用
gap和负 margin 调整子项位置——后者会覆盖前者视觉效果 - 如果用 CSS-in-JS（如 styled-components），注意模板字符串中漏写单位（如
gap: 8而非gap: 8px）会导致失效
gap 值支持哪些单位？哪些不能用
gap 支持大多数长度单位，但有明确限制：不能使用百分比（%）、em、rem 在部分旧版 Safari（≤14.1）中可能被忽略；也不能用 auto 或函数如 calc()（尽管现代 Chrome/Firefox 已支持 calc()，但兼容性需查 Can I Use）。
- 稳妥写法：用
px、vh、vmin等绝对或视口单位 - 若需响应式，建议用媒体查询切换
gap值，而非依赖rem动态缩放 - 不要写
gap: 0来“清除”间距——它只是设为零，不是移除属性；想临时禁用，直接删掉该声明更可靠
gap 和子元素 margin 冲突怎么办
Grid 的 gap 是容器级留白，不占用子元素的 margin。但若子元素自己设置了 margin，两者会叠加，导致实际间距变大，尤其在响应式断点切换时容易错乱。
立即学习“前端免费学习笔记（深入）”；
- 推荐策略：统一用
gap控制网格内间距，子元素margin设为0（或仅用于内部排版） - 如果必须保留子项 margin（比如卡片组件自带边距），可将
gap设小一点，再通过justify-content/align-content微调整体对齐 - 注意：Firefox 对
gap+overflow: hidden的组合曾有渲染 bug（已修复），若遇到间隙被截断，可尝试加padding补偿
