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润色工具以新格式重新构想您的内容