gap属性在CSS Grid中管用，但仅对display: grid/inline-grid容器生效，需写在父容器样式中，是row-gap和column-gap的简写，旧版浏览器（如IE）不支持，Safari 14.1+才稳定支持。
gap属性在CSS Grid中到底管不管用
管用，但只对Grid容器生效，对Flex或普通块元素完全无效。很多人写了gap: 1rem发现没反应，第一反应是“浏览器不支持”，其实是把display: grid漏了，或者误用在了子项上。
必须同时满足两个条件：父容器设为display: grid（或inline-grid），且gap写在该父容器的样式里。子元素自己加gap毫无意义。
-
gap是row-gap和column-gap的简写，等价于row-gap: 1rem; column-gap: 1rem - 旧版浏览器（如IE）完全不支持
gap，Safari 14.1+才开始稳定支持gap在Grid中使用 - 如果用
grid-template-areas定义布局，gap依然生效，但不会撑开命名区域之间的空隙——它只作用于实际生成的网格轨道之间
卡片网格中gap和padding混用的典型翻车现场
常见错误是给卡片本身加margin或padding来模拟间距，结果响应式一缩放就错位、换行不对齐，或者出现双倍空白。
正确做法是：卡片自身margin: 0，靠父级gap统一控距。这样网格轨道自动预留间隙，卡片尺寸计算干净，换行、对齐、auto-fit都更可靠。
立即学习“前端免费学习笔记（深入）”；
- 别在卡片上写
margin-right或margin-bottom——这会破坏Grid的轨道对齐逻辑 - 如果卡片需要内边距（比如文字离边距离），用
padding，不是margin - 当卡片有阴影或边框时，
gap值建议略大于阴影扩散半径，否则视觉上会感觉“挤”
gap值用px还是rem？响应式下怎么写才不踩坑
用rem更稳妥，但前提是根字体大小没被JS动态改过。如果项目用了vw方案或动态root fontSize，gap也会跟着变——这有时是优点，有时是bug。
纯移动端项目慎用em，因为卡片内文字大小若变化，em会连锁影响gap，导致网格忽疏忽密。
- 推荐写法：
gap: 1.25rem（即20px @16px base），兼顾可读性和缩放一致性 - 需要断点差异化间距时，直接在媒体查询里重置
gap，不要试图用calc()混合单位——部分旧版Safari对gap: calc(1rem + 4px)解析异常 - 避免
gap: 0.5rem 0这种写法在低分辨率屏上产生亚像素渲染空白（尤其Chrome on Windows），最小建议0.75rem
gap和grid-auto-flow: dense一起用会出什么问题
不会出错，但视觉上可能“跳格”。比如卡片高度不一致，又开了grid-auto-flow: dense，gap照常存在，但小卡片会往前填空，导致相邻卡片的垂直间距看起来不一致。
这不是gap失效，而是dense模式主动重排造成的视觉错觉。调试时容易误判为样式没生效。
- 想严格保持行列对齐节奏，别用
dense，老实用grid-auto-flow: row - 如果必须用
dense，建议所有卡片设统一min-height，再配gap，能大幅缓解错位感 -
gap对grid-row-start/grid-column-end等定位项无影响，它只作用于自动生成的轨道之间
gap本身很简单，难的是意识到它只在Grid上下文中起效，且必须由容器声明——这个前提漏掉一次，后面所有调试都是白忙。
