auto-fill 会按最小尺寸尽可能多创建列轨道并保留空轨道，适用于需视觉对齐或预留槽位的场景；其生效前提是父容器宽度可计算且 minmax() 第二参数必须为 1fr 或 max-content。
直接用 repeat(auto-fill, minmax()) 就能实现自动填充，但只写这行代码常常“没反应”——问题几乎都出在父容器宽度不可计算，或 minmax() 写法不合规。
auto-fill 的真实行为
它会按最小尺寸尽可能多地创建列轨道，哪怕没有子元素填入，空轨道也保留。比如容器宽 800px，minmax(250px, 1fr) 会生成 3 列（250×3=750 ≤ 800），第 4 列放不下就停，但不会把这 3 列拉宽；有 2 个子项时，它们占前两列，第三列为空、仍存在。
- 适合需要“视觉对齐”或预留拖拽槽位的场景，比如仪表盘固定格子、hover 显示空白卡片区
- 不适合纯内容流——小屏下容易出现横向滚动条或右侧大片留白
- 和
auto-fit语法完全一样，仅行为不同：后者会收缩空轨道，让有内容的列均分空间
必须写对的 minmax() 格式
minmax() 是自动填充生效的前提，但第二参数不能乱写：
- 第一参数可为
250px、20%、15em等长度值 - 第二参数只能是
1fr或max-content；写成2fr、3fr会被浏览器静默降级为max-content，列宽失控 - 正确示例：
minmax(250px, 1fr)；错误示例：minmax(250px, 2fr)
为什么 auto-fill 只显示一列？检查这三点
不是代码错，而是 Grid 失去了计算依据：
- 父容器没设明确宽度（如
width、flex-basis），或被float/inline-block干扰 - 父元素是
display: inline-grid—— 它默认按内容宽，无法触发自动填充 - 子项自身撑破容器：图片没加
max-width: 100%、文本含white-space: nowrap、flex 子项未设min-width: 0
调试时给父容器加 outline: 1px solid red，确认它真有可测量的宽度。
gap 对列数的影响别忽略
gap 不参与 minmax() 计算，但它占实际空间。若容器宽 700px、gap: 16px、每列最小 250px：
- 两列总宽最小 = 250×2 + 16 = 516px → 可容纳
- 三列总宽最小 = 250×3 + 16×2 = 782px > 700px → 实际只排两列
- 所以看似够宽，却少一列，本质是 gap 挤占了可用空间
