真正响应式三栏布局应使用repeat(auto-fit, minmax(300px, 1fr))，它使列数随容器宽度自动增减、每列至少300px且均分剩余空间；而1fr 1fr 1fr因无最小宽度约束，小屏下会强制三等分导致内容挤压变形。
直接用 repeat(auto-fit, minmax(300px, 1fr)) 就能实现真正响应式的列数变化，不需要写一堆 @media —— 但前提是理解 1fr 不是“填满”，而是“分剩余空间”，且内容撑不开、父容器有宽、子项不越界这三件事必须先做对。
为什么 1fr 1fr 1fr 在小屏上会把内容压成窄条
1fr 1fr 1fr 是固定列数，不是固定最小宽度。它强制把容器宽度三等分，哪怕容器只剩 240px，每列也硬要占约 80px。文字被迫频繁折行、图片被压缩变形、按钮点击区域过小，都是这个原因。
- 它不检查内容是否可读，只按份数切空间
- 没有
minmax()约束时，1fr会无限压缩，下限由内容的min-content（比如未折行的长 URL 或图片固有宽）决定 - 想让它“智能”，必须让每列有底线：用
minmax(300px, 1fr)告诉浏览器“至少 300px，多了再均分”
auto-fit 和 auto-fill 差在哪，选错会留白或撑高
auto-fit 只保留有内容的列轨道，空轨道归零，剩余空间由现有列拉伸填满；auto-fill 则不管有没有内容，只要够放一列（≥ minmax() 下限），就预留位置。
- 卡片流、文章列表、产品展示等真实内容场景，一律用
auto-fit -
auto-fill适合棋盘、仪表盘等需要固定网格结构、预留空白格的场景 - 别写
repeat(auto-fill, 1fr)：没minmax()约束，浏览器无法判断“够不够放”，行为不可控
常见失效场景和修复方式
写了 repeat(auto-fit, minmax(300px, 1fr)) 却没响应？大概率不是语法错了，而是基础约束断了。
- 父容器没设
width: 100%或max-width→ 容器宽度由内容撑开，Grid 失去缩放基准 - 子项里有
max-width: 100%，或长文本没加overflow-wrap: break-word→ 内容撑爆网格项，间接压制1fr分配 - 忘了
box-sizing: border-box→ padding/margin 让实际宽度超出分配范围，可能触发横向滚动 - 混用
fr和%，比如1fr 50%→ 百分比先按容器宽算，剩下空间才给fr，结果列宽失控
IE 和旧版 Safari 怎么办
fr 在 IE11 和部分旧版 Safari 中完全无效；display: -ms-grid 只认像素或百分比，加前缀也没用。
- 必须用
@supports (display: grid)包裹 Grid 样式，外层 fallback 用 Flex 布局 - 别在
minmax()里写minmax(0, 1fr)试图兼容 IE —— 它连minmax()都不识别 - gap 在 IE 中也不支持，得用
padding或margin降级，且要注意首尾多出半倍间距的问题
真正难的不是写出那一行 repeat(auto-fit, minmax())，而是意识到 1fr 的计算永远依赖「减去所有固定尺寸后的剩余空间」——图片没控宽、文本没折行、父容器没设宽，任何一个环节松动，整个弹性逻辑就崩了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
