gap属性只控制网格项之间的间距，不包括容器边缘；它是row-gap和column-gap的简写，但三者行为不完全等价，且需注意兼容性、单位混用、与padding/margin协作及响应式陷阱。
gap属性在Grid布局中到底控制什么
它只控制网格项（grid item）之间的间距，不包括容器边缘。很多人误以为gap能撑开外边距或影响grid-template-areas的空白区域，其实不会——那些“空格”只是未被分配的轨道，和gap无关。
gap写法差异直接影响兼容性和语义
gap是row-gap和column-gap的简写，但三者行为并不完全等价：
- 单独设
row-gap: 12px时，Firefox 63+ 和 Safari 14.1+ 支持；老版本 Safari 必须用gap: 0 12px才生效 -
gap: 12px等价于row-gap: 12px; column-gap: 12px，但若只想要列间距，写gap: 0 12px比分开写更简洁 - 当值含单位时（如
gap: 1rem 2ch），不能混用无单位数字（gap: 1 2rem非法）
gap和padding/margin混用时的常见错觉
把gap当成“内边距”来用，容易导致内容贴边或溢出：
- 容器本身没设
padding，仅靠gap无法让第一行/列离容器边缘产生距离 - 如果网格项用了
justify-self: stretch（默认），gap不会压缩它们的宽度，但可能让整体超出容器——此时需配合max-width或fit-content - 嵌套Grid中，子容器的
gap不影响父容器的轨道尺寸计算，这点和Flex的gap一致
响应式gap需要避开的陷阱
媒体查询里直接改gap值看似简单，但要注意：
立即学习“前端免费学习笔记（深入）”；
- 不要对
gap做transition：Chrome 和 Safari 对gap的过渡支持不稳定，动画会卡顿或跳变 - 用
clamp()设置动态gap（如gap: clamp(8px, 2vw, 16px)）时，Firefox 115+ 才完全支持，旧版需降级为媒体查询 - 如果网格列数随屏幕变化（如
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))），gap值不变，但视觉留白密度会变——这不是bug，是轨道重排的自然结果
padding、网格项margin和box-sizing。gap只是其中一环，单独调它解决不了所有“空白不听话”的问题。 
