Grid布局中“多余留白”90%源于误判：gap延伸至边缘、margin/line-height叠加、grid-auto-fill强行占位或子项未撑满轨道；应优先用grid-auto-fit+minmax(250px,1fr)、padding补偿gap、重置子项尺寸及检查隐式空白。
Grid 布局中出现“多余留白”，90% 的情况不是 Grid 本身有问题，而是你误把 gap、margin、line-height 或自动填充行为当成“空白区域”来调试。真正要动的，往往是父容器约束、子项尺寸限制或轨道定义方式。
grid-auto-fit 和 grid-auto-fill 混用导致空列残留
用 repeat(auto-fill, minmax(250px, 1fr)) 后右侧/底部多出一列空白？那是 grid-auto-fill 在强行占位——它不管有没有子元素，只要算出能放，就留轨道。
- 改用
grid-auto-fit：它只保留有内容的列，空轨道收缩为 0 - 但前提是
minmax()的最大值必须可收缩，比如minmax(250px, 1fr)✅，而minmax(250px, 300px)❌（固定上限，无法压缩） - 检查子项是否写了
min-width: 300px或flex-shrink: 0—— 这些会锁死尺寸，让grid-auto-fit失效 - 父容器没设
width或被外层display: flex压缩时，Grid 会按内容宽计算列数，也可能多出空列
gap 延伸到容器边缘造成“假留白”
gap 是网格项之间的间隙，但它**对齐到轨道边界**，所以最后一行/列右侧和底部也会有 gap，看起来像“多出一段空白”。这不是 bug，是规范行为。
- DevTools 里选中 grid 容器，看 computed
gap是否在末尾也生效（是的） - 若需视觉上“紧贴边缘”，不要删
gap，而是用padding补偿：比如gap: 16px→ 给容器加padding: 0 16px 16px 16px - 旧版 Safari 需加
-webkit-gap，缺失会导致 gap 不渲染，反而让布局错乱，误判为“留白异常”
grid-template-columns: 1fr minmax(0, 1200px) 1fr 的留白不可控
这个写法想实现居中+左右留白，但实际会让两侧 1fr 动态抢空间，小屏下中间列塌缩、大屏下留白过大，且 Safari 对 minmax(0, ...) 解析不稳定。
立即学习“前端免费学习笔记（深入）”；
- 真要留白，优先用更可靠的方式：
margin: 0 auto; max-width: 1200px;（语义清晰、全浏览器稳定） - 非要用 Grid 控制留白，改用
minmax(32px, 1fr)替代1fr，给两侧设最小像素下限，防塌缩 - 响应式场景下，别只调
max-width，同步改两侧minmax()下限，例如小屏用minmax(10px, 1fr)
子项未撑满轨道导致“内容窄、周围空”
Grid 分配了轨道，但子项默认不填满——比如一个 div 里面只有文字，它只包裹内容，上下左右看着全是“空白”，其实那只是轨道空着，不是 margin/padding。
- 给网格项加
width: 100%; height: 100%或至少min-width: 0; min-height: 0（防文本溢出撑宽） - 按钮类交互元素务必加
box-sizing: border-box+padding，否则点击热区仍可能小于 44px - 如果用了
place-items: center，视觉上“居中留空”是正常现象——那不是空白区域，是单元格内对齐结果，grid-auto-flow: dense对它完全无效
最常被忽略的一点：所谓“留白”，很多其实是 line-height 或 HTML 文本节点（换行/空格）产生的隐式空白，它们不出现在 DevTools 的 margin/padding 面板里，但真实存在。动手前，先用 outline: 1px solid red 轮廓所有子项，确认空白到底来自哪里。
