直接用grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))即可实现列数随容器宽度自动变化，无需媒体查询；而1fr 1fr 1fr是固定三列，小屏会将内容压窄变形，因其无最小宽度约束，仅按份数均分剩余空间。
直接用 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) 就能实现列数随容器宽度自动变化，不需要媒体查询也能在手机到桌面全适配；写死 1fr 1fr 1fr 或 repeat(3, 1fr) 反而在小屏上把内容压成窄条，这是最常踩的坑。
为什么 1fr 1fr 1fr 在小屏上会挤变形？
它不是“响应式”，而是“固定列数”。浏览器不管容器多窄，都硬切三等份。比如容器只剩 280px 宽，每列就被压缩到约 93px —— 图片被拉扁、文字折行混乱、点击区域过小。
-
1fr不代表“至少 300px”，只代表“剩余空间的 1 份”，没下限就无限可压 - 真正起作用的是
minmax()里的最小值，不是fr本身 - 如果子元素（如
<img>）没设max-width: 100%，还会进一步撑爆网格项
repeat(auto-fit, minmax(300px, 1fr)) 到底怎么算列数？
浏览器执行两步协商：先看“最多能塞几个 ≥300px 的列”，再把剩余空间按 1fr 均分给现有列。
- 容器宽 900px → 最多放 3 列（3 × 300px = 900px），无剩余空间，每列刚好 300px
- 容器宽 800px → 最多放 2 列（2 × 300px = 600px ≤ 800px），剩 200px → 两列各 +100px，变成 400px 宽
- 容器宽 250px → 连 1 列都塞不下 300px，
auto-fit直接退化为单列，1fr占满 250px -
auto-fit会合并空轨道，auto-fill则保留空白位，卡片流布局一律选auto-fit
哪些地方容易让 fr 失效？
fr 不是万能比例尺，它是“减去已占用空间后”的再分配器。一旦前提不成立，结果就不可控。
立即学习“前端免费学习笔记（深入）”；
- 混用
fr和%或px：比如1fr 50%，浏览器先按 % 占满一半，剩下才给 fr，列宽完全失控 - 子项有强制最小宽：如
min-width: 400px的卡片，在 350px 容器里就会溢出，fr被迫让步 - 没设
box-sizing: border-box：padding/margin 加上去，实际宽度超出了1fr分配值 - IE11 完全不识别
fr，连带整个display: grid声明失效，必须用@supports (display: grid) and (grid-template-columns: 1fr)包裹
真正难的不是抄那一行代码，而是理解 fr 从不承诺“等分”，只承诺“在可用剩余空间里按份数分”——而“可用空间”取决于你有没有漏掉 gap、padding、子项 min-content 这些隐形占用者。
