必须用auto-fit而非auto-fill，因auto-fit只生成有内容的轨道并均分剩余空间，避免空列占位导致卡片挤压或横向滚动；auto-fill则预留所有可能轨道，破坏响应式布局效果。
直接用 grid-template-columns: repeat(auto-fit, minmax()) 就能实现，不需要媒体查询硬写列数，也不用 JS 计算 —— 但必须配对使用 auto-fit 和 minmax()，写错一个参数就会换行失效或卡片被压扁。
为什么必须用 auto-fit 而不是 auto-fill
auto-fill 会提前预留所有可能的轨道，哪怕没内容也占位；auto-fit 只为有内容的列生成轨道，并把空余空间平均分配给现有列，这才是“自动换行”的本质。
- 现象：用
auto-fill+minmax(280px, 1fr)，在 800px 宽容器里本该放 2 列，结果它强行铺满 3 列，第三列只有约 240px 宽，卡片文字挤成两行甚至出现横向滚动条 - 原因：Grid 认为“还能塞一列”，就真塞了，不管内容是否可读
- 修复：换成
auto-fit，它发现第三列放不下 280px，就主动放弃，只留 2 列并拉伸填满
minmax(280px, 1fr) 的两个参数怎么设才不翻车
第一个值（最小宽度）决定换行临界点，第二个值（最大宽度）决定列如何分剩余空间。设错会导致小屏单列失败、中屏多出窄列、大屏撑不满。
- 最小值别低于
250px：iPhone SE 屏宽 375px，减去左右 gap 后可用宽度约 345px，minmax(250px, 1fr)可稳住单列；设成200px可能意外触发双列，文字过窄 - 最大值必须是
1fr，不能是auto或固定值：minmax(280px, auto)中的auto在这里无效，浏览器当minmax(280px, max-content)处理，卡片会按内容撑开，破坏等宽 - 不要给卡片子元素设
width: 100%：尤其图片容器，会锁死宽度，让1fr失效；改用max-width: 100%或直接不设宽
gap 和卡片内部样式怎么配合才不出白边
gap 是 Grid 布局原生间距控制，但它和卡片自身的 margin、padding 叠加后容易造成视觉误差，比如顶部多出 1rem 空隙、卡片边缘被切掉。
- 统一用
gap管理行列间距，卡片内部去掉所有margin（特别是margin-top、margin-bottom） - 如果设计要求“首行无上 gap、末行无下 gap”，说明这不是 Grid 场景 —— 此时应换
display: flex; flex-wrap: wrap或 JS 动态加 class - 卡片内容区（如
.card__body）要撑高，得靠display: flex; flex-direction: column; flex: 1，而不是height: 100%（后者依赖父级显式高度，在 Grid 隐式行中常为 0） - 图片必须加
width: 100%; height: auto;或aspect-ratio，否则加载时高度塌陷，导致整行卡片被拉矮
IE11 兼容和 Safari 旧版要注意什么
IE11 完全不支持 auto-fit 和 minmax()，Safari ≤15.6 对 gap 需要 -webkit-gap 前缀，但这些只是降级细节，不影响主逻辑。
- IE11 fallback：用
@supports (display: grid) and (grid-template-columns: repeat(auto-fit, minmax(0, 1fr))))包裹现代写法，IE 下走display: flex; flex-wrap: wrap - Safari 旧版：加
-webkit-gap: 1.5rem，且避免在minmax()里用小数，比如minmax(280.5px, 1fr)可能解析异常 - 真正容易被忽略的是 Grid 容器自身高度上下文：如果父容器有
max-height: 0或overflow: hidden，align-items: stretch就拉不开卡片 —— 检查父级是否切断了高度传递
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
