不推荐使用 grid-gap，应改用 gap。gap 是统一简写属性，支持 grid 和 flex 布局，等价于 row-gap 和 column-gap，不可为负，不作用于子元素，且 gap 空间不参与 fr 轨道计算。
grid-gap 在现代 CSS 中是否还推荐使用
不推荐。从 CSS Grid Level 2 开始，grid-gap 已被标记为过时（deprecated），应改用 gap。虽然目前所有主流浏览器仍支持 grid-gap，但它的语义局限在 Grid 布局中，而 gap 同时适用于 Grid 和 Flex 布局，且更符合 CSS 属性命名统一趋势。
如何正确设置行间距和列间距
gap 是一个简写属性，等价于同时设置 row-gap 和 column-gap。当只给一个值时，它同时作用于行列；给两个值时，第一个是行间距，第二个是列间距：
grid-container {
display: grid;
gap: 12px; /* 行距 = 列距 = 12px */
/* 或 */
gap: 8px 16px; /* 行距 = 8px，列距 = 16px */
}- 如果只需单独控制某一个方向，直接用
row-gap或column-gap更清晰 -
gap不接受负值，也不能用于子元素上——它只作用于网格容器（display: grid的父元素） - 单位支持
px、rem、%（百分比基于网格容器内联尺寸，慎用）
gap 与 padding/margin 混用时的常见错觉
开发者常误以为 gap 是“网格项之间的 margin”，实际它是在网格轨道之间插入空白，**不增加子元素的 margin 或影响其盒模型**。这意味着：
- 网格项自身的
margin依然生效，可能和gap叠加导致意外留白 -
padding在网格容器上控制的是内容区到边框的距离，和gap无冲突，但视觉上容易混淆 - 若网格项设置了
width: 100%，gap不会压缩其宽度——Grid 会自动调整轨道尺寸来容纳间隙
兼容性与降级处理要点
IE 完全不支持 gap 和 grid-gap；Edge 16+ 支持 grid-gap，但仅 Edge 79+ 才支持 gap。如需兼容旧版 Edge 或做渐进增强：
立即学习“前端免费学习笔记（深入）”；
- 优先使用
gap，再额外声明grid-gap（后者会被现代浏览器忽略，但旧版 Edge 能识别） - 避免依赖
gap实现关键布局对齐，尤其当网格项有背景色或边框时，缺失间隙会导致视觉粘连 - CSS 自定义属性无法动态切换
gap和grid-gap，因为二者不能共存于同一声明块生效逻辑中
真正容易被忽略的是：当用 fr 单位划分轨道时，gap 占用的空间不计入 fr 计算——它是在轨道之外额外分配的，这点和 padding 的行为本质不同。
