auto-fit + minmax 是首选组合，因它让浏览器自动计算列数，确保每列不小于最小宽度且避免空轨道；常见错误是漏写 minmax 或误用 auto-fill；需配合子项约束与图片处理以解决高度不一致问题。
直接用 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) 就能搞定，不用写一堆媒体查询，也不用担心小屏错行或大屏留白。
为什么 auto-fit + minmax 是首选组合
它让浏览器自动算列数：容器够宽就多排几列，窄了就自动换行，且每列不会小于你设定的最小宽度（比如 250px）。比手动写 @media 更轻量，也比 auto-fill 更干净——auto-fit 会合并空轨道，避免最后一行只有一两个商品还硬占满整行。
常见错误是写成 repeat(auto-fill, 250px)，这样列宽死锁在 250px，缩放时内容被挤压；或者漏掉 minmax()，导致小屏下卡片塌缩变形。
-
minmax(250px, 1fr)表示“至少 250px，最多分到 1 份剩余空间” - fr 不是像素，它按可用宽度动态分配，但会被内容撑开（比如长标题），需要子项加
min-width: 0或overflow: hidden来约束 - Chrome 66+、Firefox 63+、Safari 11.1+ 都支持，IE 不支持，如需兼容得 fallback 到媒体查询
怎么处理商品卡片高度不一致的问题
名称长短不一、图片比例不同，会导致卡片高度参差——Grid 默认不强制等高，得靠 align-items: stretch（默认值）和子项自身行为配合。
关键在子项内部布局：如果用 Flex 做卡片内容对齐，记得给卡片加 display: flex; flex-direction: column;，再把价格和按钮用 margin-top: auto 推到底部。否则光靠 Grid 外层无法控制内部元素垂直定位。
- 别依赖
grid-auto-rows设固定高度，内容溢出时会裁剪 - 避免在卡片里用
float或position: absolute，它们会脱离文档流，破坏 Grid 的高度计算 - 如果卡片内有图片，设
img { width: 100%; height: auto; object-fit: cover; }防止拉伸变形
什么时候必须加媒体查询
当设计规范明确要求“手机必须 1 列、平板必须 2 列、桌面必须 4 列”，且不允许浏览器自动微调时，就得上媒体查询。比如电商首页 Banner 下方的商品区，运营可能要求严格对齐栅格线。
这时别全盘推翻 auto-fit，而是用断点覆盖：先写基础 auto-fit，再在关键尺寸点用 @media 覆盖 grid-template-columns 值。
- 手机：
@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); } - 注意：这些断点要和设计稿一致，别照搬“常见值”，否则在某些安卓平板上会卡在 2 列和 3 列之间反复抖动
真正容易被忽略的不是怎么写列数，而是卡片内文字溢出时的截断逻辑、图片加载失败的占位处理，以及服务端渲染时 CSS 还没注入导致的初始布局跳变——这些往往在线上才暴露，得在真实设备上连着 Network Throttling 测一遍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
