grid-auto-fill 强行填满容器并保留空轨道，grid-auto-fit 则收缩无内容轨道为0；二者均需 minmax() 触发伸缩，常见空白源于子项固定宽高或父容器宽度缺失。
grid-auto-fill 和 grid-auto-fit 的区别在哪
两者都用于 grid-template-columns 或 grid-template-rows 中配合 repeat() 实现自动列数计算，但行为关键不同：grid-auto-fill 会**强行填满容器宽度**，即使后续没有子元素，也会保留空轨道；grid-auto-fit 则在无内容时**收缩空轨道为 0**，只保留有内容的列（或行）。
空白区域通常就来自 grid-auto-fill 在子项不足时留下的“占位”列。想消除它，优先换用 grid-auto-fit。
-
grid-auto-fill：适合需要固定列宽、且允许空白列存在的场景（如仪表盘预留插槽） -
grid-auto-fit：更适合响应式卡片列表、图库等——内容到哪，布局撑到哪 - 两者都要求使用
minmax()，例如minmax(250px, 1fr)，否则无法触发自动伸缩逻辑
为什么用了 grid-auto-fit 还有空白
常见原因是子元素设置了固定宽高或 min-width/min-height，导致它们无法真正“收缩”，从而撑开空轨道。另外，父容器未设 width 或被外层 flex 容器压缩，也可能让 grid 计算出错。
- 检查子项是否含
width: 300px、flex-shrink: 0或min-width: 200px—— 这些会阻止grid-auto-fit收缩空列 - 确认父容器有明确宽度（比如
width: 100%或max-width），否则 grid 可能按内容宽计算，误判为“足够放更多列” - 避免在 grid 容器上同时用
display: flex，二者混用容易导致尺寸解析冲突
minmax() 的写法直接影响空白是否出现
minmax() 是 grid-auto-fit 起效的前提，但写错参数会让它退化为固定列行为。重点不是“最小值够小”，而是“最大值能否响应收缩”。
立即学习“前端免费学习笔记（深入）”；
