gap属性支持双值语法控制行列间距，推荐用row-gap/column-gap独立设置以避免覆盖；IE需用margin模拟并注意:last-child过滤；Flexbox的gap仅支持一维。
gap 属性本身就能分别控制行间距和列间距
很多人误以为 gap 只能设一个值，其实它支持两个参数：gap: <row-gap> <column-gap>。如果你发现行间距和列间距不一致，大概率是只写了单值（比如 gap: 12px），此时浏览器会把同一值同时用于行和列——但视觉上“不一致”往往来自其他干扰因素。
- 检查是否被更具体的规则覆盖：比如某子项设置了
margin或父容器有padding，造成错觉 - 确认 grid 容器没有嵌套多层，外层容器的
gap和内层叠加后产生复合效果 - 注意
row-gap和column-gap是独立属性，可单独设置，gap只是简写；若已显式声明了row-gap，再写gap: 8px不会重置row-gap
用 row-gap / column-gap 显式分离控制更可靠
当需要行、列间距不同（比如行距 16px、列距 8px），直接用独立属性比依赖 gap 简写更清晰、不易被覆盖。
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
row-gap: 16px;
column-gap: 8px;
}
这样写的好处是语义明确，且不会因后续只改 gap 而意外覆盖掉其中一个方向的值。尤其在组件化开发中，避免简写带来的隐式耦合。
IE 兼容场景下 gap 不生效？用 margin 模拟要小心顺序
IE 完全不支持 gap（包括 row-gap/column-gap），如果需兼容，常用做法是给 grid 子项加 margin。但必须注意：
立即学习“前端免费学习笔记（深入）”；
- 不能简单加
margin-right和margin-bottom，否则最后一列/最后一行会多出多余间隙 - 推荐用
:not(:last-child)过滤：例如.grid-item:not(:last-child) { margin-right: 8px; }控制列间隙 - 行间隙同理，但需结合
grid-auto-rows高度计算，否则 margin 可能撑开行高导致错位
Flexbox 里也叫 gap，但行为和 Grid 不完全一样
虽然 gap 在 Flexbox 中也存在，但它只作用于主轴方向的相邻项目之间（即 flex-direction 决定是“行”还是“列”），不支持二维控制。如果你在 flex 容器里发现“行列间距不一致”，那说明你根本没在用 Grid —— 别试图用 flex 的 gap 解决 grid 的布局问题。
真正需要二维间隙对齐时，别犹豫，切回 display: grid，并用 row-gap + column-gap 显式定义。
