auto-fill在CSS Grid中配合repeat()函数可自动根据容器宽度生成尽可能多的网格轨道并预留空位。其基本语法为repeat(auto-fill, )或结合minmax()定义弹性尺寸，如minmax(150px, 1fr)，确保每列最小150px、最大占满可用空间；当容器不足时自动换行或隐藏不可见列。与auto-fit不同，auto-fill保留空白轨道，而auto-fit会收缩空轨道使有内容的列拉伸填满。常用于卡片布局、图库等场景，例如.gallery { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }，实现无需媒体查询的响应式设计。
使用 auto-fill 配合 CSS Grid 的 repeat() 函数，可以让网格容器自动根据可用空间生成尽可能多的列或行，即使没有内容填充也会预留位置。
基本语法与作用
auto-fill 用于 grid-template-columns 或 grid-template-rows 中，通常和 repeat() 一起使用。它会自动创建足够多的轨道来填满容器，哪怕这些轨道是空的。
repeat(auto-fill,) repeat(auto-fill, minmax(, ))
例如：
.container {
display: grid;
grid-template-columns: repeat(auto-fill, 200px);
}
这表示每列宽 200px，容器有多宽就尽可能放多少列，自动换行（需配合 grid-auto-rows 或内容撑开）。
立即学习“前端免费学习笔记（深入）”；
结合 minmax 实现响应式布局
更实用的方式是使用 minmax()，让列宽具有弹性。
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
说明：
- 每个列最小 150px，最大为 1fr（平均分配剩余空间）
- 当容器宽度不足以放下一个 150px 的列时，该列不会显示
- 内容少也能保持对齐，新增项会自动补位
与 auto-fit 的区别
auto-fill 和 auto-fit 看似相似，但行为不同：
- auto-fill：创建所有可能的轨道，空白区域保留
- auto-fit：创建轨道后，把空轨道收缩，让有内容的列拉伸占满
比如容器能放 5 个 100px 列，但只有 3 个项目：
- 用
auto-fill：出现 2 个空列 - 用
auto-fit：3 个项目平均占据全部宽度
实际应用建议
适合用于卡片布局、图库、按钮组等需要自动排列的场景。
.gallery {
display: grid;
gap: 16px;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
这样每张卡片最小 200px，数量随屏幕变小自动减少，无需媒体查询。
基本上就这些，auto-fill 是实现简洁响应式网格的好工具。不复杂但容易忽略细节。
