auto-fit 的核心是合并空轨道而非自动适配列数，1fr 是等分剩余空间而非填满容器；需避免父容器无宽、子项跨行、图片溢出等问题，仅内容结构变化时才需 @media。
直接用 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))) 就能覆盖绝大多数响应式卡片网格需求，不需要为每个断点写 @media —— 但前提是理解 auto-fit 和 1fr 真正在做什么，否则很容易在小屏看到空白列、内容被压扁，或桌面端列数卡死不动。
为什么 auto-fit 不是“自动适配”而是“合并空轨道”
auto-fit 的核心行为不是“让列数变多变少”，而是「把没内容的网格轨道收掉」。它先按 minmax() 尝试生成尽可能多的列，再把其中没分配到子元素的列宽度归零，并把剩余空间重新分给有内容的列。
- 如果容器宽 600px，
minmax(280px, 1fr)最多允许放 2 列（2 × 280 = 560 ≤ 600），那么两列均分剩余空间 → 各约 300px - 如果容器缩到 270px，连一列
280px都塞不下，auto-fit就会放弃生成任何列轨道，退回到单列模式 → 这一列直接取1fr，占满 270px - 换成
auto-fill：同样 270px 宽度下，它仍会强行生成一列（因满足minmax下限），但该列会被压缩到 270px，且若你有 2 张卡片，第二张就会被挤进第二列——而这一列实际是空的，只是轨道没被回收
1fr 不是“填满”，而是“等分剩余空间”
1fr 的计算永远基于「减去所有固定尺寸、内容最小宽（min-content）、gap 占用后的剩余空间」。它不关心你有多少项，只按轨道数量参与分配。
- 卡片里有个未折行的长 URL（
min-width: 400px），容器总宽才 500px，那即使写了1fr 1fr，第一列也可能被撑到 400px，第二列只剩 100px ——1fr不是保底，是协商结果 - 防撑爆的关键是
minmax(0, 1fr)或minmax(240px, 1fr)：前者让文本可收缩换行，后者设底线避免过窄导致排版断裂 -
fr在 IE 中完全无效，display: -ms-grid只认px/%，别试图加前缀兼容
常见失效场景和修复方式
写对了语法，但布局没响应？大概率是父容器或子项破坏了 Grid 的自动分配逻辑。
立即学习“前端免费学习笔记（深入）”；
- 父容器没设
width或用了display: inline-grid→ 容器宽度由内容撑开，失去缩放基准；应确保父容器有明确宽度（如width: 100%或max-width） - 子项写了
grid-column: span 2或grid-row→ 手动跨列会干扰repeat()的隐式轨道生成节奏，导致列数计算错乱 - 卡片内图片没设
max-width: 100%或容器没控高 → 图片溢出拉伸列宽，间接压制1fr分配空间 - 用
margin代替gap控制间距 →margin会撑开父容器、触发横向滚动，且首尾多出半倍间距；应统一用gap: 1rem
什么时候必须加 @media 断点
不是屏幕变小就要加断点。auto-fit + minmax() 已能扛住从 320px 到 2560px 的宽度变化。真正需要媒体查询的，是内容结构级变化：
- 卡片标题从一行变成两行，导致高度翻倍 → 此时需调大
minmax()的最小值（如从280px提到320px），而非重写整条grid-template-columns - 设计要求「移动端堆叠、桌面端左右分栏」→ 这属于区域重排，该用
grid-template-areas配合@media，而不是硬调列数 - 旧版 Safari（iOS 16.4 以下）需加
-webkit-gap前缀，但grid-template-columns本身无需额外前缀
最常被忽略的一点：gap 不影响网格容器外边距，也不参与 1fr 计算 —— 它是在轨道间隙上叠加的，所以不用在 minmax() 里手动减去 gap；但如果你的卡片有 padding 或 border，它们会吃掉内容可用空间，这时才需要 calc(1fr - 16px) 这类微调。
