auto-fit + minmax(280px, 1fr) 是实现真正响应式卡片流的核心，因它自动收缩空轨道、均分空间，配合 grid-auto-rows: minmax(12rem, auto)、卡片内 display: flex; flex-direction: column; height: 100% 及图片 object-fit: cover，才能确保等高、换行与视觉一致性。
直接用 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 就能实现真正无需媒体查询的卡片流，但必须配合 grid-auto-rows: minmax(12rem, auto) 和卡片内部的 display: flex; flex-direction: column; height: 100%，否则等高和换行都会失效。
为什么 auto-fit 比 auto-fill 更适合卡片流
auto-fill 会为所有可能轨道预留空间，哪怕没内容也会撑宽容器、触发横向滚动；auto-fit 只保留有内容的列，并把剩余空间均分给它们——这才是“流”的本质。
- 小屏下（比如 320px 宽）：
auto-fit自动收缩为 1 列，卡片占满宽度；auto-fill可能强行塞进 2–3 列，导致卡片被压扁或溢出 - 中屏（如 768px）：
auto-fit稳定输出 2 列，不留空隙；auto-fill若内容不足，会在末尾留白列，破坏视觉节奏 - 桌面端（≥1200px）：
auto-fit动态扩展到 4–5 列，不依赖断点计算
minmax(280px, 1fr) 的取值不是随便写的
280px 是文字可读、图片不糊、按钮不挤的底线宽度；低于这个值，卡片信息密度崩坏，用户交互成本陡增。1fr 不是“填满”，而是“在满足最小宽度前提下均分剩余空间”。
- 设成
minmax(200px, 1fr)：小屏下卡片太窄，标题换行、图片裁切失控 - 设成
minmax(320px, 1fr)：中屏（768px）只能塞下 2 列，浪费空间；大屏（1440px）最多 4 列，不如 280px 下的 5 列灵活 - 别用
minmax(280px, 2fr)或其他非1fr最大值——会破坏列宽均等性，导致卡片宽度参差
卡片内部高度拉伸失败的三个常见原因
Grid 容器设了 grid-auto-rows: minmax(12rem, auto)，但卡片还是高低不一，问题几乎全出在子元素上。
-
.card上写了height: 300px或max-height: 20rem：直接阻止 Grid 轨道拉伸，删掉；如需兜底最小高度，改用min-height: 0 -
.card没设display: flex; flex-direction: column; height: 100%：子元素无法继承轨道高度，margin-top: auto推不动底部按钮 - 图片没加
object-fit: cover或aspect-ratio: 4/3：加载抖动或比例失真会让卡片高度跳变，破坏等高节奏
容器本身必须有可计算的宽度上下文
如果 .card-grid 外层是 position: absolute 或 display: inline-grid，又没设 width，Grid 就不知道“可用空间”在哪，auto-fit 会退化为单列或行为不可控。
- 确保父容器有
width: 100%、max-width或明确的inline-size - 避免在
flex容器里嵌套 Grid 却不设flex: 1或min-width: 0，Flex 默认不收缩，Grid 拿不到真实可用宽度 - IE 完全不支持
auto-fit，Safari 10.1+、Chrome 57+、Firefox 52+ 均可用——若需兼容 IE，得 fallback 到display: flex+flex-wrap
最容易被忽略的是：等高不是 Grid 自己“画出来”的，它靠的是轨道高度 + 子元素严格继承 + 内容不溢出三者咬合。少一个环节，auto-fit 就只是个换行列数的工具，不再是真正的响应式流。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
