最可靠纯CSS实现两列/三列自适应的方案是grid布局配合repeat(auto-fill, minmax(180px, 1fr))，180px为兼顾小屏与可读性的经验值，需配合gap、aspect-ratio及@supports回退确保兼容性与视觉稳定。
用 grid 布局配合 minmax() 和 auto-fill 最可靠
纯 CSS 实现两列/三列自适应，不依赖 JS 或媒体查询硬切，grid 是当前最稳的方案。核心是让列数随容器宽度自动伸缩，而不是写死断点。
关键在于：grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) —— 这行代码会让每列最小 180px（保证商品图不被压扁），最大占满可用空间，浏览器自动算出能放几列。
常见错误是用 auto-fit 混淆逻辑，或把最小值设得太小（如 120px），导致小屏下挤出四列、文字重叠；设太大（如 220px）又会让中屏只显示一列。
-
180px是经验值：iPhone SE 宽度 375px，两列刚好各 ~175px（留间距），三列会略窄但可读 - 如果商品图比例固定（如 1:1），建议加
aspect-ratio: 1防止拉伸 - 别用
grid-column-gap而用gap，兼容性更好（Chrome 66+/Safari 16.4+）
需要精确控制列数上限？加 max-width 限制容器
有些业务要求“最多三列”，哪怕屏幕再宽也不许四列——这时不能只靠 grid 自动计算，得干预容器宽度。
立即学习“前端免费学习笔记（深入）”；
比如商品列表包裹在 .product-grid 里，给它加 max-width: 1140px，再配合居中：margin: 0 auto。这样即使桌面端屏幕超宽，容器也不会无限撑开，grid 列数自然被约束在 2~3 列之间。
注意：不要对 grid 本身设 max-width，否则可能破坏列宽计算逻辑；必须作用在父容器上。
- 1140px 是参考值：三列 × 180px + 两处 gap（各 16px）≈ 572px，留足边距和文字空间后定的
- 若需适配 iPad Pro（1024px 宽），可设
max-width: 960px避免三列过松 - 搭配
width: 100%确保小屏下仍能铺满
老版本 Safari（iOS 15.4 及以下）不支持 minmax() 怎么办？
iOS 15.4 之前的 Safari 对 grid 的 minmax() 支持不全，会退化成单列。这不是 bug，是规范实现差异。
稳妥做法是加一层 @supports 检测，fallback 到 flex 布局：
/* 默认用 flex 回退 */
.product-grid {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.product-grid > * {
flex: 0 0 calc(50% - 8px);
}
@supports (display: grid) {
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 16px;
}
.product-grid > * {
margin: 0;
}
}这里 flex 的 calc(50% - 8px) 是为两列设计（减去一半 gap），比媒体查询更轻量；@supports 也比 UA 判断更可靠。
- 别用
float回退，维护成本高且易错 - 测试时务必用真机 iOS 15.3，模拟器可能误报支持
- 如果项目已放弃 iOS 15.4 以下，这层 fallback 可直接删
图片加载导致布局抖动？用 aspect-ratio 配合 object-fit
商品列表最常见的视觉问题不是列数，而是图片加载前高度塌陷，加载后突然撑开，引发内容跳动（layout shift）。尤其在慢网下明显。
解决方法是提前声明宽高比，并约束图片行为：
- 给商品卡片加
aspect-ratio: 3 / 4（假设图是竖构图），浏览器会按比例预留空间 - 图片标签用
<img src="..." alt="" style="max-width:90%"> - 避免用
height: auto或没设aspect-ratio的div包裹图片
注意：aspect-ratio 在 Safari 15.4+ 才完全支持，老版本可加 padding-top: 133%（即 4/3 的百分比）做伪实现，但需额外 wrapper 元素。
列数切换本身不难，真正花时间的是让每张图、每行文字、每个价格标签在不同列数下都保持呼吸感——这点容易被忽略，直到上线后用户反馈“看着累”。
