如何在CSS中使用Grid制作商品列表网格_grid-template-columns repeat控制

使用 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）单位：

grid-template-columns: repeat(3, 1fr);

这会将容器均分为 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 的搭配，就能灵活控制商品网格的结构和响应行为。不复杂但容易忽略细节。