Grid容器需设display: grid并配合grid-template-columns使用auto-fit或auto-fill实现自动换行，仅设display: grid会导致单列堆叠；推荐写法为repeat(auto-fit, minmax(250px, 1fr))，商品项无需设width或flex属性，统一用gap控制间距，minmax最小值需结合内容实际调整。
Grid容器必须设display: grid且定义列轨道
不设grid-template-columns，Grid就默认单列，根本不会换行。自动换行靠的是grid-template-columns配合auto-fit或auto-fill，而不是靠flex-wrap那一套。
常见错误是只写display: grid，没配列，结果所有商品堆成一列往下排。
-
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))—— 推荐，内容足够时等宽分栏，窄屏自动收缩列数 -
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))—— 和auto-fit视觉上常一样，但空轨道行为不同（auto-fill会保留空白列，auto-fit会合并） - 别用
grid-template-columns: 1fr 1fr 1fr这种固定列数写法，它不会随容器缩放自动删列
商品项无需设width或flex相关属性
Grid里每个商品项（item）默认就是独立网格单元，加width: 100%或flex: 1反而可能破坏布局。Grid的列轨道已经决定了宽度分配逻辑。
容易踩的坑：给商品外层容器加display: flex再套Grid，或者在Grid item里又嵌一层Flex，导致尺寸计算混乱、间隙错位。
立即学习“前端免费学习笔记（深入）”；
- 商品项只需保持自然块级行为，不设
width、float、display: inline-block - 如需控制单个商品宽度上限，用
max-width而非width，避免在小屏下撑破网格 - 间距统一用
gap（推荐），别用margin——后者在Grid中易引发塌陷或重复间隙
响应式断点不是必须的，但minmax()里的最小值要合理
很多人一上来就写一堆@media，其实minmax(250px, 1fr)本身就有响应能力：当容器宽度不足250px × 列数时，Grid自动减少列数。
问题常出在minmax()的最小值设得太小（如120px）或太大（如320px）。太小导致小屏挤成超窄列；太大则大屏也只显示两列，浪费空间。
- 典型值参考：
minmax(280px, 1fr)适合移动端起始，minmax(320px, 1fr)适合带侧边栏的中屏 - 如果商品卡片有固定比例（比如16:9图+文字），最小值应略大于卡片内容所需最小宽度，否则文字换行异常或图片被压扁
- 真需要断点时，只改
minmax()第一个参数，例如@media (min-width: 768px) { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
IE不支持auto-fit/auto-fill，降级方案要提前想好
Edge 16+、Chrome 57+、Firefox 52+都支持，但IE全系列不认auto-fit，直接失效退回到单列。如果项目还要兼容IE，不能只靠Grid自动换行。
这时候要么加JS检测后切换Flex布局，要么用CSS多列（column-count）兜底，但后者对卡片高度不一致的场景很不友好。
- 简单降级：用
@supports not (grid-template-columns: repeat(auto-fit, 1fr)))包裹Grid代码，里面写Flex fallback - 注意
gap在IE也不支持，降级时得用margin模拟，且要处理第一行/首项的额外边距 - 真正上线前，务必在目标设备上实测最小宽度下的列数是否符合预期——有些安卓旧版浏览器对
minmax()解析有偏差
minmax()里那个最小值没结合真实内容调准，导致小屏还是溢出、大屏却空着半边。调的时候拿真机预览比看DevTools模拟器更靠谱。 
