使用repeat(auto-fill, minmax())可创建自动调整列数的响应式栅格系统，.container设置grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))时，每列最小200px，容器宽度足够则自动新增等宽列并均分剩余空间；结合minmax函数可在不同屏幕下弹性伸缩列宽，避免空白或溢出；实际用于卡片布局时，.grid设gap和相同repeat规则，.card设置样式后即可自适应换行分布，充分利用空间，适用于现代网页灵活布局。
使用CSS Grid的repeat()函数配合auto-fill关键字，可以轻松实现一个能根据容器宽度自动调整列数的灵活栅格系统。这种方法无需媒体查询就能响应式地生成合适数量的列。
理解 auto-fill 的作用
auto-fill用于grid-template-columns中的repeat()函数时，会尽可能多地重复指定的列轨道，只要空间足够容纳该列的最小尺寸。未使用的空间可通过minmax()控制或由网格自动分配。
例如：
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
这表示：每列至少200px宽，如果剩余空间允许，就自动创建新列，且所有列等宽并填满容器。
立即学习“前端免费学习笔记（深入）”；
结合 minmax 实现弹性列宽
关键在于minmax(最小值, 最大值)的使用。它让每一列在一定范围内伸缩：
- 当容器较窄时，列数减少，每列宽度仍保持合理
- 容器变宽时，自动增加列数，直到每列达到最小设定值
- 多余空间由所有列均分（因为最大值是1fr）
这种组合避免了固定列数带来的空白或溢出问题。
实际应用示例
一个常见的卡片布局可这样实现：
.grid {
display: grid;
gap: 16px;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.card {
background: #f0f0f0;
padding: 20px;
text-align: center;
}
无论屏幕大小如何变化，卡片都会自动换行并均匀分布，始终充分利用可用空间。
基本上就这些——用repeat(auto-fill, minmax())构建的栅格系统简洁、响应性强，适合大多数现代网页布局需求。
