直接用 display: grid 配合 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 可解决多列商品卡片自适应布局，无需媒体查询或 JS，现代浏览器全支持，且规避了 flex-wrap 在图片加载、字体回流、gap 兼容性及子项压缩变形等方面的不可预测问题。
直接用 display: grid 配合 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 就能跑通绝大多数多列商品卡片场景，不需要媒体查询、不用 JS 计算列数，现代浏览器全支持。
为什么不用 flex-wrap 做多列商品流
flex-wrap 在真实页面中极易出错：图片异步加载导致宽度临时为 0，卡片突然换行错位；字体加载延迟造成文字回流，子项宽度微变引发整行重排；Safari 对 gap 支持滞后（iOS 14.5 之前不认），降级用 margin 又会触发外边距合并，末行留白或首行塌陷。这些都不是“调调值就能好”的问题，而是底层布局模型的不可预测性。
-
flex-basis写成33.333%时，小数精度误差在 subpixel 渲染下可能让第 4 个卡片被挤到下一行 - 没设
flex-shrink: 0的卡片，在窄屏下会被压缩变形，尤其含图片时 - 无法天然保证等高对齐，得靠
align-items: stretch+ 所有子项设height: 100%，但内容高度动态时反而撑破容器
grid-template-columns 怎么写才真正自适应
关键不是填满几列，而是告诉浏览器：“每列至少 280px，能塞下就多塞，塞不下就换行”。auto-fit 和 auto-fill 行为不同：auto-fit 会收缩空轨道，适合列表类内容；auto-fill 保留空轨道，适合固定栅格背景。
- 推荐写法：
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) - 最小宽度选 280px 是因为移动端竖屏下，320px 宽设备减去左右边距后，单卡净宽约 280px 左右，再小就影响可读性
- 别写死
repeat(3, 1fr)—— 大屏留白，小屏溢出，还得配一堆媒体查询补丁 - 容器本身要有明确宽度约束，比如
max-width: 1200px; margin: 0 auto;，否则在超宽屏下卡片会被拉得过宽
gap 替代 margin 的实操细节
gap 是 Grid 和 Flex 的原生间距控制机制，它不参与盒模型计算，不会和子项的 margin 合并，也不会导致父容器高度塌陷。但要注意兼容性断层。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- Grid 中用
gap: 1.5rem即可，无需给每个.product-card加margin-bottom - Flex 横向滚动场景也建议用
gap，但 Safari 14.1 及更早版本不支持，得加降级：gap: 1rem; margin-right: 1rem;+:last-child { margin-right: 0; } - IE11 完全不支持
gap，如需兼容，Grid 方案必须 fallback 到flex-wrap+margin手动模拟，且放弃auto-fit - 别在 Grid 容器上同时写
gap和子项margin，容易叠加出双倍间距
卡片内部高度不一致怎么稳住布局
商品卡片标题行数不同、描述长度不一、按钮位置浮动——这些都会导致视觉错位。靠 align-items: start 只是治标，真正要解决的是底部操作区锚定和图片占位。
- 给卡片设
display: flex; flex-direction: column;，主体内容区域加flex-grow: 1，按钮用margin-top: auto贴底 - 图片必须防抖动：
aspect-ratio: 4/3（Chrome 103+ / Firefox 98+）或 fallback 用伪元素撑高：::before { padding-top: 75%; } - 避免给
.product-card设固定height，flex 布局依赖自然高度，硬设会导致内容截断 - 文字超长截断用
display: -webkit-box; -webkit-line-clamp: 2;，比 JS 截字更轻量、更稳定
最常被跳过的其实是图片占位和 IE11 兜底路径——前者导致 CLS（累积布局偏移）被 Lighthouse 打低分，后者一旦漏测，上线后老用户直接看到空白容器。别等 QA 提 bug 才补，一开始就该把 aspect-ratio 和 width/height 属性写进 <img> 标签里。
