CSS Grid实现商品列表多列排版需设容器display: grid，用grid-template-columns控制列数与宽度、gap控制间距；支持固定列宽（如minmax(280px,1fr)）和响应式断点切换（手机1列、平板2列、桌面3-4列），配合flex布局实现等高卡片与内容对齐，并注意兼容性处理及父容器宽度约束。
用 CSS Grid 实现商品列表的多列排版，核心是把容器设为 display: grid，再通过 grid-template-columns 控制列数和宽度，配合 gap 控制间距，简洁又响应灵活。
基础多列布局（固定列宽）
适合屏幕宽度较稳定、商品卡片尺寸统一的场景。例如每列 280px，自动换行：
.product-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
}说明：
– repeat(auto-fill, ...) 让浏览器尽可能多地填满可用空间；
– minmax(280px, 1fr) 表示每列最小 280px，剩余空间平均分配；
– gap 同时控制行距和列距，比 margin 更干净。
响应式列数控制（按断点切换）
不同屏幕下显示不同列数，更符合实际浏览习惯：
- 手机（≤480px）：1 列
- 平板（481px–768px）：2 列
- 桌面（≥769px）：3 或 4 列
对应 CSS：
立即学习“前端免费学习笔记（深入）”；
.product-list {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
<p>@media (min-width: 481px) {
.product-list {
grid-template-columns: repeat(2, 1fr);
}
}</p><p>@media (min-width: 769px) {
.product-list {
grid-template-columns: repeat(3, 1fr);
}
}</p><p>@media (min-width: 1024px) {
.product-list {
grid-template-columns: repeat(4, 1fr);
}
}等高商品卡片 + 内容对齐
Grid 天然支持行内元素等高，但需注意子项内容对齐方式：
- 给商品项（如
.product-item）加display: flex; flex-direction: column;，让内部标题、价格、按钮垂直排列 - 用
justify-content: space-between;推开底部按钮，保持卡片底部对齐 - 图片建议统一宽高比（如
aspect-ratio: 4/3;），或用object-fit: cover;防止拉伸变形
兼容性与兜底处理
Grid 在现代浏览器中支持良好（Chrome 57+/Firefox 52+/Safari 10.1+），若需兼容 IE，可加简单 fallback：
.product-list {
display: -ms-grid; /* IE10-11 */
display: grid;
-ms-grid-columns: 1fr 1fr; /* IE 需手动写列数 */
grid-template-columns: repeat(2, 1fr);
}更稳妥的做法是用 @supports 进行特性检测，只对支持 Grid 的浏览器启用：
@supports (display: grid) {
.product-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 20px;
}
}不复杂但容易忽略：确保父容器有足够宽度，且商品项没有意外的 float、inline 或固定 width 干扰 Grid 自动计算。
