gap属性仅在display: grid或inline-grid容器中生效，flex、subgrid等无效；需确认父容器display值，避免与column-gap/row-gap混用导致覆盖，且gap不继承。
gap属性在grid布局中直接生效的条件
不是所有grid容器都能用gap——必须是显式声明为display: grid或display: inline-grid的容器，flex、block甚至display: subgrid都不认这个属性。
常见错误现象：gap写了但没效果，大概率是因为父容器其实是display: flex，或者用了float、position: absolute破坏了grid上下文。
- 确认父容器的
display值确实是grid或inline-grid - 避免在grid容器上同时设置
column-gap和row-gap再叠加gap，后者会覆盖前两者 -
gap不继承，子元素不会自动获得间隙，它只作用于grid容器的直接子项（即grid items）之间
gap和row-gap/column-gap的优先级与兼容性差异
gap是简写，row-gap和column-gap是独立属性；三者共存时，gap会覆盖row-gap和column-gap的值，但反过来不成立。
兼容性上，gap在现代浏览器（Chrome 66+、Firefox 63+、Safari 16.4+）已无问题，但旧版Safari（row-gap/column-gap，且需要-webkit-前缀。
立即学习“前端免费学习笔记（深入）”；
- 如果要兼容Safari 15.x及更早版本，建议同时写：
row-gap: 8px; column-gap: 12px; gap: 8px 12px; - 单独写
gap: 10px等价于row-gap: 10px; column-gap: 10px -
gap: 10px 20px表示row-gap: 10px、column-gap: 20px，顺序固定，不能颠倒
gap对网格线和track尺寸的实际影响
gap不是“在item之间加空白”，而是**从grid container的可用空间里，先切出gap区域，再把剩余空间分配给tracks**。这意味着gap会压缩track尺寸，尤其当使用fr单位时容易误判布局结果。
比如grid-template-columns: 1fr 1fr + gap: 20px，实际两列宽度之和 = 容器宽 − 20px，每列分到的是(容器宽 − 20px) / 2，而不是“容器宽/2 − 10px”。
- 用
gap后，grid-template-areas定义的区域不会被gap打断，gap只是视觉/布局间隔，不影响命名区域连通性 -
gap值可以是px、rem、%（百分比基于grid容器内联尺寸，即width方向），但不能是auto或负值 - 当grid track用
minmax(0, 1fr)这类弹性写法时，gap仍会先扣除，可能让某些track收缩到内容最小宽度
gap在嵌套grid或与justify-content/align-content混用时的边界行为
gap只控制grid items之间的间距，不影响grid容器自身在父容器里的对齐，也不影响items内部的内容排列。但它和justify-content、align-content共同存在时，gap区域会被算进“未被items占据的空白”里。
典型场景：一个高度固定的grid容器，设置了align-content: center和gap: 16px，那么gap产生的空白也会被居中分配，而不是挤在顶部或底部。
- 如果想让gap只出现在items之间、不参与整体对齐，就别设
align-content或justify-content，改用padding模拟外边距 - 嵌套grid中，子grid的
gap完全独立于父grid，父子之间没有继承或穿透关系 - 注意
gap不作用于grid-row-start/grid-column-end跨行跨列的item——它只在相邻的、非跨格的items之间起效
