应优先使用 auto-fit 而非 auto-fill，因其会合并空轨道并拉伸现有列填满整行；minmax() 第二参数须为 1fr 等弹性单位，避免固定值或 % 导致列宽锁死；grid-auto-rows 应设为 minmax(min-content, max-content) 并约束子项尺寸。
直接用 grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) 就行，不用写一堆 @media。它不是“猜列数”，而是让浏览器实时算：容器够宽就多塞一列，不够就换行，整个过程无 JS、无断点、不卡顿。
为什么 auto-fit 比 auto-fill 更适合响应式卡片布局
auto-fit 和 auto-fill 看似只差一个词，但渲染结果完全不同：
-
auto-fit：生成轨道后，会合并所有空轨道，已有列拉伸填满整行——这是你想要的“内容有多少占多少位”效果 -
auto-fill：强行预留所有可能轨道（哪怕没内容），小屏下右侧常留大片空白，甚至触发横向滚动条 - 95% 的卡片/图标/商品列表场景，应该无条件选
auto-fit
minmax() 里写错单位会导致列数“锁死”
minmax() 的第二个参数决定列能否随容器缩放。写错就失效：
- ✅ 正确：
minmax(240px, 1fr)——1fr是 Grid 原生弹性单位，按剩余空间均分 - ❌ 错误：
minmax(240px, 300px)或minmax(240px, max-content)—— 列宽被硬性限制，缩放时不会换行，只会挤压内容 - ⚠️ 避免用
%：minmax(240px, 50%)在嵌套 flex 容器或带 padding 的父元素中基准混乱，极易导致文字折行或横向溢出
列数变了但子项不堆叠？检查这两处
常见现象：视口缩小后列数确实减少了，但网格项仍横向溢出、不换行堆叠。问题通常不在 grid-template-columns：
立即学习“前端免费学习笔记（深入）”；
-
grid-auto-rows设得太小（比如grid-auto-rows: 100px），压制了内容自然撑高，导致换行逻辑异常 - 子项内部没约束尺寸，尤其是
<img alt="如何用CSS Grid实现根据屏幕宽度自动切换列数的布局" >缺少width: 100%; height: auto;，图片原始宽高撑破单元格 - 推荐兜底写法：
grid-auto-rows: minmax(min-content, max-content)，让每行高度随内容伸缩
真正难的不是写出那条 repeat(auto-fit, minmax())，而是理解它不看 DOM 子节点数量，只认容器宽度和最小列宽——想靠 :has() 或 nth-child 控制列数，浏览器直接忽略整条规则。
