gap比margin更可靠，因其是网格容器原生属性，只作用于轨道间、不参与盒模型计算，且随列数自动重分布；而margin会合并、导致最后一行多余空白，需额外处理。
直接用 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))) + gap，就能实现列数自动增减、每列等宽、间隙自适应——但必须控制好容器宽度和子项样式，否则 gap 会失效或列宽崩掉。
为什么 gap 在 Grid 里比 margin 更可靠
很多人给每个网格项加 margin-bottom 模拟行间距，结果最后一行底部多出空白，或者小屏下 margin 过大挤压内容。这是因为 margin 会合并、不受容器约束，而 gap 是网格容器的原生属性，只作用于轨道之间，不参与盒模型计算。
-
gap值始终相对于容器可用空间生效，不会导致子项溢出 - 搭配
auto-fit时，gap会随列数变化自动重分布，无需媒体查询干预 - 若用
margin，必须额外处理最后一行的:nth-child()或 JS 判断，维护成本高
minmax(280px, 1fr) 的最小宽度怎么选才不卡死列数
设得太小（比如 200px），小屏下可能强行塞两列，文字挤成一团；设太大（比如 350px），中屏设备只能单列，浪费空间。280px 是当前主流卡片内容（含图标+两行文字+操作按钮）的最小可读宽度基准值。
- 移动端（≤480px）：自动退为 1 列，
1fr占满全宽 - 平板（481–768px）：通常触发 2 列，每列约 360px（扣除 gap 后）
- 桌面（≥769px）：稳定 3 列起，列宽随窗口拉伸均分
- 别写死
minmax(300px, 1fr)后又给容器加padding: 20px却忘了box-sizing: border-box，否则实际可用宽度少 40px，列数判断就偏移了
间隙自适应不是靠 %，而是靠 clamp() 或视口单位
写 gap: 1rem 在手机上显得过大，在 4K 屏上又太小；写 gap: 2% 会随容器高度变化，完全不可控。真正适配的写法是用 clamp() 或 vw。
立即学习“前端免费学习笔记（深入）”；
-
gap: clamp(0.5rem, 2vw, 1rem)—— 小屏保底 0.5rem，中屏按视口缩放，大屏封顶 1rem -
gap: 1.5vmin—— 取视口宽高较小值的 1.5%，在竖屏手机和横屏笔记本上都较均衡 - 避免
gap: 5%：百分比 gap 在 Grid 中无定义，浏览器会忽略整条声明 - Firefox 和 Chrome 117+ 支持良好；若需兼容 Chrome 116-，降级为固定
gap: 12px即可
子项内容撑开列宽？先检查这三处隐性干扰
即使 CSS 写对了，图片、文本、Flex 容器仍可能让 minmax() 失效，因为它们强行覆盖了轨道尺寸计算逻辑。
- 图片没加
max-width: 100%→ 直接突破列宽，整列被拉宽 - 标题用了
white-space: nowrap→ 文字拒绝折行，列宽被迫扩张以容纳整行 - 卡片内部用了
display: flex且子项有flex: 1→ 弹性分配抢占了 grid 轨道的控制权 - 统一加
img, video { max-width: 100%; height: auto; }和* { overflow-wrap: break-word; }能覆盖 90% 的撑开问题
最常被忽略的是容器本身的 width 和 max-width —— 如果父容器是 display: inline-block 或未设宽度，minmax() 里的 1fr 就失去参照系，整个自适应逻辑就停摆了。
