CSS如何实现优雅的间距_使用CSS Grid控制盒模型间隙

grid-gap 被弃用是因为 CSS Grid Level 2 规范将其标记为过时，统一改用 gap；它现支持 Grid、Flexbox 和多列布局，但 IE 完全不支持，且 gap 不继承、不与 margin 叠加抵消，subgrid 也不继承父级 gap。grid-gap 为什么被弃用了？因为 grid-gap 已在 CSS Grid Level 2 规范中被标记为过时，现代写法统一用 gap。它不只是 Grid 专用------Flexbox 和多列布局（column-count）现在也支持 gap，但只有 Grid 完全生效（Flexbox 的 gap 在旧版 Safari 中曾有兼容问题）。常见错误现象：grid-gap: 1rem 在某些旧项目里还能跑，但新项目一开严格 lint 就报 warning；更隐蔽的是，当同时写了 gap 和 grid-gap，后者会被忽略，但开发者可能误以为"双保险"。用 gap 替代所有 grid-gap、grid-row-gap、grid-column-gap单值写法 gap: 1rem 同时控制行距和列距；双值写法 gap: 1rem 0.5rem 表示 row-gap 在前、column-gap 在后注意：IE 完全不支持 gap，如果需兼容 IE，得回退到 margin + :nth-child 手动模拟，但代价是语义断裂和维护成本飙升gap 和 margin 混用会出什么问题？很多人想"保险起见"，在 Grid 容器设了 gap: 1rem，又给子项加 margin: 0.5rem，结果间距翻倍还错位。根本原因是：Grid 的 gap 是容器级的"轨道间隙"，不参与子项盒模型计算；而 margin 是子项自身的外边距，两者叠加，浏览器不会自动抵消。使用场景：当你需要"部分子项额外留白"（比如最后一个按钮要和底部保持更大距离），别改 gap，而是单独给那个元素加 margin ------ 但必须确认父容器没设 align-items: stretch 或其他导致 margin collapse 的条件。立即学习"前端免费学习笔记（深入）"； CONTENDA AI润色工具，以新格式重新构想您的内容