使用 repeat() 函数定义列布局，如 repeat(4, 200px) 创建四等宽列，repeat(3, 1fr) 实现均分响应式布局，结合 minmax(200px, 1fr) 可自适应屏幕宽度，确保商品项最小宽度并自动换行，配合 gap 和 padding 优化间距，实现整洁灵活的商品网格。
使用CSS Grid制作商品列表网格时，grid-template-columns 配合 repeat() 函数是最常用也最高效的方式。它能快速定义等宽或响应式的列布局，让商品项整齐排列。
基本语法：用 repeat() 简化列定义
如果不使用 repeat()，你需要手动写出每一列的宽度：
grid-template-columns: 200px 200px 200px 200px;而使用 repeat() 可以简化为：
grid-template-columns: repeat(4, 200px);这表示创建 4 列，每列宽 200px。非常适合商品卡片等固定或半固定布局。
立即学习“前端免费学习笔记（深入）”；
响应式等分布局：结合 fr 单位
为了让商品列表在不同屏幕下自动适应，推荐使用 fr（fraction）单位：
这会将容器均分为 3 列，每列占据相等空间。页面缩放时，列宽自动调整，适合响应式商品展示。
常见实用组合：
- repeat(2, 1fr)：两列布局，适合移动端
- repeat(4, 1fr)：四列桌面布局
- repeat(auto-fit, minmax(250px, 1fr))：自适应列数，每项最小 250px，最大撑满
实战示例：商品列表代码
一个典型的商品网格布局写法：
.container {display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
padding: 16px;
}
.item {
border: 1px solid #ddd;
padding: 16px;
text-align: center;
}
这样无论屏幕多宽，商品项都会尽量多排，但不会小于 200px，超出则换行，视觉整洁。
基本上就这些。掌握 repeat() 和 fr 或 minmax 的搭配，就能灵活控制商品网格的结构和响应行为。不复杂但容易忽略细节。
