auto-fit丢弃空轨道，auto-fill保留空轨道；商品列表等动态内容布局必须选auto-fit，因其能按子元素数量建轨并均分空间，避免小屏下留白、换行或触控失效。
auto-fit 和 auto-fill 有什么区别，为什么必须选 auto-fit
auto-fit 会把空的轨道（即没内容的网格轨道）完全收缩掉，而 auto-fill 会保留所有生成的轨道，哪怕它们是空的。商品列表通常有动态数量（比如 1～12 个），页面宽度变化时，你希望列数自动增减、不留空白列——这正是 auto-fit 的核心价值。
- 如果用
auto-fill，小屏下可能生成 6 列但只填了 2 个商品，剩下 4 列留白撑开容器，布局发散 -
auto-fit配合minmax()才能真正实现“尽可能多列，但每列不小于某值” - 浏览器兼容性没问题：Chrome 57+、Firefox 52+、Safari 10.1+、Edge 16+ 均支持
grid-template-columns: repeat(auto-fit, minmax(...)) 怎么写才有效
关键不是套公式，而是理解三个参数的协作关系：repeat(auto-fit, minmax(280px, 1fr)) 是常见写法，但它的行为取决于父容器宽度和子项数量：
-
280px是单列最小宽度（比如商品卡最小可读宽度），低于此值就触发列数减少 -
1fr表示剩余空间均分，不是固定像素，所以列宽会弹性拉伸 - 必须加
justify-content: stretch（默认值，一般不用显式写），否则小数量商品时可能左对齐留大片右空
常见错误：
- 写成
minmax(280px, 2fr)：第二参数不能是带系数的fr，浏览器会忽略整条声明 - 忘记给 grid 容器设
width: 100%或限制最大宽，导致在大屏下无限拉宽单列 - 商品卡片没设
min-width: 0，内部文字或图片强制撑宽，破坏网格约束
商品卡片内容溢出导致网格错位怎么办
Grid 轨道高度由内容撑开，但商品图、标题、价格等长度不一，容易造成同一行卡片高度参差，视觉割裂。这不是 auto-fit 的问题，而是卡片自身未约束：
- 给商品容器加
display: grid; grid-template-rows: auto 1fr auto;，让标题区域（第二行）强制占满剩余高度并截断 - 图片用
object-fit: cover; height: 0; padding-bottom: 100%;实现响应式正方形容器，避免拉伸变形 - 标题文字加
overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; - 关键：所有卡片必须设
min-width: 0，否则 flex/grid 子项默认不收缩，内部长单词或 URL 会强行突破minmax()限制
需要兼容老浏览器时怎么降级
IE 完全不支持 auto-fit，即使写了也当无效声明处理。别试图用 @supports 包裹整个 grid 声明——它无法检测 auto-fit 是否生效（@supports (grid-template-columns: repeat(auto-fit, 1fr))) 在 Safari 10.0 等早期版本会误判为支持）。
更稳妥的做法：
- 主样式用 Grid +
auto-fit - 用
@supports not (display: grid)给老浏览器回退到display: flex; flex-wrap: wrap; - Flex 版本需手动控制列数：通过媒体查询配合
flex-basis模拟响应列数，例如flex-basis: calc(33.333% - 16px)控制三列
实际项目中，真正容易被忽略的是：当商品数据为空数组时，grid 容器高度塌陷为 0，需要额外设 min-height: 200px 或插入占位提示；还有 SSR 渲染时 JS 未执行前，auto-fit 不会生效，得靠服务端预判视口宽度注入对应列数类名兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
