<p>使用CSS Grid或Flexbox实现多列产品布局，Grid通过grid-template-columns: repeat(4, 1fr)创建四列网格，Flexbox利用flex-wrap: wrap和calc(33.33% - 16px)实现三列弹性布局，两者均配合gap设置间距，并通过媒体查询在不同屏幕下调整列数以确保响应式展示。</p>
在CSS中实现多列产品展示布局，最常用的方法是使用 Flexbox 或 CSS Grid。这两种方式都能轻松创建响应式、对齐整齐的产品列表，适用于电商网站或商品展示页面。
使用 CSS Grid 实现多列布局
Grid 是构建多列布局的推荐方式，特别适合等宽或固定列数的布局。
示例：每行显示4个产品，自动换行.product-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
padding: 16px;
}
.product-item {
border: 1px solid #ddd;
padding: 16px;
text-align: center;
}
通过调整 repeat() 中的数字，可以控制每行显示的产品数量。例如改为 repeat(3, 1fr) 就变成三列。
使用 Flexbox 实现多列布局
Flexbox 更灵活，适合需要兼容旧浏览器或更复杂对齐控制的场景。
立即学习“前端免费学习笔记（深入）”；
示例：三列弹性布局，自动换行
.product-container {
display: flex;
flex-wrap: wrap;
gap: 16px;
padding: 16px;
}
.product-item {
flex: 1 1 calc(33.33% - 16px);
border: 1px solid #ddd;
padding: 16px;
box-sizing: border-box;
}
其中 calc(33.33% - 16px) 确保三列加上间隙后仍能完整显示在一行。若要四列，可改为 calc(25% - 12px)。
响应式多列布局建议
为了让产品布局在手机、平板等设备上也能正常显示，应结合媒体查询动态调整列数。
添加响应式断点：
@media (max-width: 768px) {
.product-container {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.product-container {
grid-template-columns: 1fr;
}
}
这样在小屏幕上会自动变为两列或单列，提升可读性和操作体验。
基本上就这些。Grid 更简洁直观，Flexbox 更兼容灵活，按项目需求选择即可。关键点是设置好 gap 间距和响应式规则，让产品展示清晰美观。不复杂但容易忽略细节。
