Grid容器必须设display: grid且定义grid-template-columns，否则按默认单列渲染；商品列表自适应核心是grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))，用gap控制间距、padding处理外边距，响应式仅调minmax最小值，IE11需降级并加@supports检测。
Grid容器必须设display: grid且定义列轨道
不写grid-template-columns，哪怕用了display: grid，元素也会堆成一列——这不是“没生效”，是Grid按默认单列规则渲染。商品列表要自适应，核心是用repeat()配合minmax()和auto-fit：
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))。这里
280px是单个商品卡片最小宽度，1fr让剩余空间均分；auto-fit会收缩空轨道，而auto-fill则保留空位，选前者更实用。
商品卡片的margin不能靠父容器gap以外的方式控制
常见错误是给每个.item加margin-right或margin-bottom，结果在小屏下导致最后一列溢出或换行错乱。Grid的gap才是唯一可靠方式：
gap: 16px。它自动处理边界留白，且不参与尺寸计算——这意味着
minmax(280px, 1fr)始终按内容区宽度评估，不会被margin干扰。如果需要外边距，只在Grid容器自身加padding。
响应式断点只需调整minmax()里的最小值，别重复写@media
很多人在@media里重写整套grid-template-columns，其实冗余。只要最小宽度合理，Grid本身就能应对多数视口变化。例如平板用minmax(320px, 1fr)，桌面用minmax(280px, 1fr)，仅需一处修改：
@media (max-width: 768px) { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }。注意：不要把gap也塞进媒体查询，除非真有不同间距需求——统一gap更易维护。
IE11不支持auto-fit，但可用repeat(4, 1fr)降级
如果项目仍需兼容IE11，auto-fit和minmax()都会失效。此时放弃“完全自适应”，改用固定列数+max-width限制单卡宽度：
grid-template-columns: repeat(4, 1fr); max-width: 1200px;。再配合
margin: 0 auto居中，虽不能随屏幕动态增减列数，但能避免布局崩塌。真正的坑在于：写了auto-fit却没配@supports检测，导致IE11直接回退到普通块流布局——务必用@supports (display: grid)包裹Grid代码。
立即学习“前端免费学习笔记（深入）”；
