应使用 column-gap 和 row-gap 替代已废弃的 grid-column-gap 与 grid-row-gap；现代浏览器均支持，旧写法会导致 ci 警告、typescript 库不识别及编辑器提示失效。
grid-column-gap 和 grid-row-gap 已被废弃，别再用了
这两个属性在现代 CSS 中已正式过时，浏览器虽然还支持，但规范里早就替换成 column-gap 和 row-gap。继续用旧名，CI 会报 warning，TypeScript 的 CSS-in-JS 库（比如 Emotion）可能直接不识别，VS Code 的智能提示也常失效。
旧写法：grid-column-gap: 12px → 新写法：column-gap: 12px；同理 grid-row-gap → row-gap。
- 所有现代浏览器（Chrome 66+、Firefox 63+、Safari 14.1+）都支持新属性，无需前缀
- 如果项目还要兼容 IE 或老版 Safari（gap 合并写法 + fallback（见下一条）
- PostCSS 插件如
postcss-gap-properties可自动降级，但注意它只处理gap，不处理旧名
gap 是 column-gap + row-gap 的简写，但有默认行为陷阱
gap 看似方便，但它的单值语法会同时设置行列间隙，且当只写一个值时，row-gap 会继承该值 —— 这点容易被忽略，尤其当你只想调列间距却意外拉开了行距。
常见错误场景：在响应式布局中，移动端想缩小列间隙但保持行紧凑，结果写了 gap: 8px，导致卡片垂直间距也缩成 8px，视觉上挤在一起。
立即学习“前端免费学习笔记（深入）”；
-
gap: 12px→row-gap: 12px且column-gap: 12px -
gap: 12px 24px→row-gap: 12px，column-gap: 24px（顺序固定，不能颠倒） - 如果只需控制列，直接用
column-gap更安全；需要分别控制，优先拆开写，别硬凑gap - Flex 布局不支持
gap（直到 Chrome 115+ 才开始有限支持），别在display: flex容器里试
Grid 里 gap 不影响 track sizing，但会改变可用空间计算
很多人以为 gap 会像 padding 那样“撑开”容器，其实不会。它只是在网格线之间插入空白，不参与 grid-template-columns 的轨道尺寸定义，但会影响子项能分到的总宽度。
例如：grid-template-columns: 1fr 1fr + gap: 20px，容器宽 400px，那两个 1fr 实际各分到 (400px − 20px) / 2 = 190px，不是 200px。
- gap 的像素值会从容器总尺寸中扣除，再分配给 tracks；百分比或
fr值都是基于扣除后的剩余空间计算 - gap 本身不占
grid-area，也不触发滚动条；但若内容溢出，是因为子项自身宽高超限，和 gap 无关 - 用
minmax(0, 1fr)替代1fr可缓解小屏幕下 gap 导致子项过窄的问题
gap 在嵌套 Grid 中不会穿透，父子间隙要各自设
父容器设了 gap: 16px，子容器也是 Grid，它的子项不会自动继承这个间隙。CSS 的 gap 没有继承性，每个 Grid 容器必须显式声明。
典型踩坑：写了一个卡片列表（父 Grid），每张卡片内部又是 Grid 布局（头图+标题+描述），结果发现卡片内文字贴边、没留白，以为是样式没生效，其实是忘了给卡片加 gap。
- 父级
gap只作用于其直接子元素（即卡片），不影响卡片内部结构 - 嵌套 Grid 的间隙必须单独设置，不存在“全局 gap 配置”
- 如果多个层级都需要统一间隙，建议抽成 CSS 自定义属性，比如
--grid-gap: 12px，然后各层用gap: var(--grid-gap)
gap 当作可继承属性来用。写完 Grid 布局后，顺手扫一眼子容器是不是也需要间隙，比事后调试快得多。 
