1fr 1fr 1fr 在小屏失效因 fr 不保最小宽度，仅分配剩余空间；正确响应式三栏应使用 repeat(auto-fit, minmax(300px, 1fr))，兼顾弹性与可读性。
直接用 1fr 1fr 1fr 做三栏，在小屏上会把内容压成窄条，根本不可读——这不是写错了，而是没理解 fr 的本质：它不保最小宽度，只分“扣掉固定尺寸后的剩余空间”。
为什么 1fr 1fr 1fr 在手机上会失效
它强制三等分容器宽度，不管内容是否能塞下。200px 宽的屏幕下，每栏只剩约 66px，图片被压缩、文字频繁折行、点击区域过小。浏览器不会因为“看起来难受”就自动换列，fr 没有响应式逻辑，只有算术逻辑。
-
fr不是百分比，也不等价于33.33%；它是“减去所有显式尺寸（如px、em、gap）后，再按份数切剩下的空间” - 没设
min-width或minmax()，fr就会无限压缩，直到内容撑爆网格项或触发换行 - 移动端优先必须默认单列，而不是靠
@media“收缩”三栏——后者容易漏掉flex-wrap、box-sizing等隐性依赖
真正可用的响应式三栏写法：用 repeat(auto-fit, minmax())
这行代码才是现代三栏布局的核心：repeat(auto-fit, minmax(300px, 1fr))。它让浏览器自己决定列数，而不是你硬编码“必须三列”。
-
minmax(300px, 1fr)：每列至少 300px，最多占它应得的那份剩余空间 -
auto-fit：尽可能多放列，但空轨道会被合并，剩余空间由现有列均分 - 800px 宽 → 放两列，各得 400px；280px 宽 → 只放一列，占满 280px
- 别写
repeat(auto-fill, 1fr)——没有minmax约束，浏览器无法判断“够不够放”，行为不可控
左右固定 + 中间自适应？别只写 250px 1fr 250px
这种写法在桌面端没问题，但一到平板或小屏，左右栏就会把中间挤没。要让它“有弹性”，就得把固定值换成带上限的范围。
- 推荐写法：
grid-template-columns: minmax(240px, 25%) 1fr minmax(240px, 25%) -
minmax(240px, 25%)表示“至少 240px，最多占容器 25%”，既防压缩又防撑太开 - 如果侧栏内容极简（如图标导航），可改用
max-content 1fr max-content，但务必加min-width: 0和overflow-wrap: break-word防撑爆 - 绝对不要混用
%和fr，比如20% 1fr 20%——%按容器总宽算，fr按剩余空间算，结果不可预测
最容易被忽略的三个细节
写对 grid-template-columns 只完成一半。剩下那部分，往往卡在 DOM 结构、盒模型或兼容性上。
- 父容器没设
width: 100%或max-width，Grid 容器可能坍缩成内容宽，导致列计算失准 - 子元素（尤其是
<img>、<p></p>）没加max-width: 100%和box-sizing: border-box，padding/margin 会让实际宽度超分配值 - IE11 完全不支持
fr，哪怕写了display: -ms-grid也只认像素/百分比；必须用@supports (display: grid)包裹，外层 fallback 用flex-wrap
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
