使用 repeat() 函数定义列布局，如 repeat(4, 200px) 创建四等宽列，repeat(3, 1fr) 实现均分响应式布局，结合 minmax(200px, 1fr) 可自适应屏幕宽度，确保商品项最小宽度并自动换行，配合 gap 和 padding 优化间距，实现整洁灵活的商品网格。
使用CSS Grid制作商品列表网格时，grid-template-columns 配合 repeat() 函数是最常用也最高效的方式。它能快速定义等宽或响应式的列布局，让商品项整齐排列。
如果不使用 repeat()，你需要手动写出每一列的宽度：
grid-template-columns: 200px 200px 200px 200px;而使用 repeat() 可以简化为：
grid-template-columns: repeat(4, 200px);这表示创建 4 列，每列宽 200px。非常适合商品卡片等固定或半固定布局。
立即学习“前端免费学习笔记（深入）”；
为了让商品列表在不同屏幕下自动适应，推荐使用 fr（fraction）单位：
grid-template-columns: repeat(3, 1fr);这会将容器均分为 3 列，每列占据相等空间。页面缩放时，列宽自动调整，适合响应式商品展示。
常见实用组合：
一个典型的商品网格布局写法：
.container {这样无论屏幕多宽，商品项都会尽量多排，但不会小于 200px，超出则换行，视觉整洁。
基本上就这些。掌握 repeat() 和 fr 或 minmax 的搭配，就能灵活控制商品网格的结构和响应行为。不复杂但容易忽略细节。
以上就是如何在CSS中使用Grid制作商品列表网格_grid-template-columns repeat控制的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
704
收藏
