答案：使用 grid-template-columns 配合 repeat(auto-fill, minmax()) 可创建响应式网格布局，自动填充列并适应容器宽度；auto-fill 会保留空轨道，而 auto-fit 使有内容的列扩展填满空间，结合 minmax() 能灵活控制每列最小和最大宽度，适用于商品卡片等多列表格布局，实现无需媒体查询的自适应效果。
在CSS Grid布局中，grid-template-columns 配合 repeat() 和 auto-fill 是实现响应式多列表格布局的高效方式。它能自动根据容器宽度填充尽可能多的列，无需依赖媒体查询。
auto-fill 的基本用法
auto-fill 允许Grid容器在可用空间内自动创建足够多的轨道（列或行）来填充容器。结合 minmax() 函数，可以设置每列的最小和最大宽度，从而实现灵活的响应式布局。
例如，创建一个每列至少 200px、最多 1fr 的多列布局：
.grid-container {display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 16px;
}
这段代码表示：尽可能多地创建宽度不小于200px的列，剩余空间由各列均分（1fr）。
立即学习“前端免费学习笔记（深入）”；
auto-fill 与 auto-fit 的区别
虽然两者都用于自适应列数，但行为略有不同：
- auto-fill：即使某列没有内容，也会预留空白轨道
- auto-fit：会将空轨道收缩，让有内容的列扩展以填满空间
如果希望列始终铺满容器且不留空，使用 auto-fit 更合适；若需要保持网格结构一致（如卡片布局），auto-fill 更佳。
实际应用场景示例
假设要构建一个响应式的商品展示网格，每项商品卡片最小宽度为150px：
.product-grid {display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 20px;
padding: 20px;
}
.product-card {
background: #f4f4f4;
padding: 15px;
text-align: center;
border-radius: 8px;
}
当容器宽度变化时，列数会自动增减，始终保持最佳显示效果。手机端可能只显示一列，桌面端则可显示四列甚至更多。
基本上就这些。掌握 repeat(auto-fill, minmax()) 模式，能让你快速搭建出无需JavaScript干预的响应式网格布局。不复杂但容易忽略细节。
