1fr 是剩余空间的份数，auto 是内容最小尺寸起点；1fr 需容器有明确宽高才生效，auto 则按 min-content 起步并可能被拉伸，二者计算维度不同。
1fr 是剩余空间的份数，auto 是内容最小尺寸的起点
很多人以为 auto 就是“自动撑满”，1fr 就是“占三分之一”，其实两者根本不在一个计算维度上。1fr 的前提是容器有明确的可用空间（比如设置了 width 或 height），它只参与分配「扣除固定尺寸、gap、内容最小宽（min-content）之后剩下的空余」；而 auto 本质是 min-content 起步，再根据轨道约束决定是否拉伸。
典型误判场景：
- 写
grid-template-columns: auto 1fr，结果第一列比文字还宽——其实是auto被同行的1fr拉伸了（Grid track sizing algorithm 默认允许auto增长以填满剩余空间） - 写
grid-template-rows: 1fr auto，但容器height: auto，第一行直接塌掉——因为没“剩余空间”可分，1fr失效
什么时候用 auto 更合适
auto 的真实价值在于“由内容说了算”，尤其适合头部、侧边栏、按钮组这类尺寸不可预测但又不能被压缩的区域。
- 导航栏高度随字体大小变化？用
grid-template-rows: auto 1fr - 左侧菜单宽度要刚好包住图标+文字？
grid-template-columns: auto 1fr+min-width: 0阻断拉伸 - 卡片里有个固定高图片，下方文字要自适应？
grid-template-rows: auto minmax(0, 1fr)，第二行既防溢出又保弹性
1fr 必须配合明确约束才有效
1fr 不是比例，也不是百分比。它不关心容器总宽，只认“减完才开始分”。如果某列内容本身很宽（比如未折行 URL），1fr 1fr 也会被撑成 400px + 100px，而不是均分。
- 防撑爆：用
minmax(0, 1fr)替代1fr，允许内容换行收缩 - 保底线：用
minmax(240px, 1fr)，小屏不坍缩，大屏能扩展 - 混用固定值时注意顺序：
200px 1fr 2fr中，200px先扣掉，剩下空间才按 1:2 分 - IE 完全不支持
fr，display: -ms-grid只认px和%，别加前缀骗自己
auto 和 1fr 在隐式网格中的行为差异
grid-template-columns 管显式列，grid-auto-columns 管隐式列（比如项目数超过定义列数时自动生成的列）。这里容易踩坑：
- 只设
grid-template-columns: 1fr，但项目有 5 个 → 后 4 列默认用auto（不是1fr！），宽度可能参差不齐 - 想让所有隐式列也弹性？得显式写
grid-auto-columns: 1fr -
auto-fill和auto-fit生成的隐式轨道，其尺寸仍受grid-auto-columns控制，不是自动继承1fr
最常被忽略的一点：auto 在列方向若父容器没设 width，会退化为 100%；而 1fr 直接失效——这不是 bug，是规范规定它必须有“可用空间”才能参与计算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
