auto-fit + minmax() 是最简响应式解法，因浏览器自动计算列数、每列不小于250px且等分剩余空间；需配合flex布局、图片约束和gap单位等样式才真正可用。
直接用 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) 就能实现商品列表的响应式排版，不需要写媒体查询，也不用担心小屏错行或大屏留白。
为什么 auto-fit + minmax() 是最简解法
浏览器会根据容器宽度自动计算列数：宽屏下多列并排，窄屏下自动换行，且每列不会小于你设定的最小宽度（比如 250px）。minmax(250px, 1fr) 的意思是“至少 250px，最多分得一份剩余空间”，1fr 是动态比例单位，不是固定像素，所以它能随容器缩放自适应。
常见错误包括：
- 写成
repeat(auto-fill, 250px)—— 列宽被锁死，内容挤变形 - 漏掉
minmax()，直接写repeat(auto-fit, 1fr)—— 小屏下单列塌缩到极窄，文字换行混乱 - 误用
auto-fill而非auto-fit——auto-fill会预留空轨道，导致最后一行只有一两个商品却撑满整行宽度
必须加的配套样式才能真正“可用”
光靠 grid-template-columns 不够，商品卡片高度不一致、图片拉伸、文字溢出等问题会立刻暴露。关键收尾动作如下：
立即学习“前端免费学习笔记（深入）”；
- 给卡片容器加
display: flex; flex-direction: column;，再用margin-top: auto把价格/按钮推到底部，解决垂直对齐问题 - 图片必须设
img { width: 100%; height: auto; object-fit: cover; }，否则比例失真 - 卡片内部若含长标题或不定高内容，需加
min-width: 0或overflow: hidden，防止子项撑开列宽、破坏minmax()行为 -
gap推荐用px或rem，别用%—— 窄屏下百分比间隙可能塌缩到不可见
什么时候不得不写媒体查询
当设计规范强制要求“手机必须 1 列、平板必须 2 列、桌面必须 4 列”，且不允许浏览器微调时，就得覆盖默认行为。但不要全盘抛弃 auto-fit，而是用断点精准覆盖：
- 手机：
@media (max-width: 480px) { grid-template-columns: 1fr; } - 平板：
@media (min-width: 481px) and (max-width: 768px) { grid-template-columns: repeat(2, 1fr); } - 桌面：
@media (min-width: 769px) { grid-template-columns: repeat(4, 1fr); }
注意：这些断点只是覆盖，基础样式仍保留 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))，保证降级后仍有基本响应能力。
IE 兼容与嵌套 Grid 的边界
Chrome 66+、Firefox 63+、Safari 11.1+ 都支持 auto-fit 和 minmax()，IE 完全不支持。如需兼容 IE，只能回退到媒体查询 + 固定列数方案，别试图 polyfill。
局部复杂结构（比如单个商品卡片内图文混排）可放心用嵌套 Grid：.card { display: grid; } 即可，父容器无需额外设置；但要注意嵌套层级过深时，gap 不会叠加，而 padding 会影响子网格可用宽度，这点容易被忽略。
