速查在线工具箱CSS Grid 里 fr 和 auto 到底差在哪？
fr 分的是「剩下的空间」，auto 认的是「内容要多大」。把两者混着用最容易出的问题，是内容太宽时轨道被硬生生撑开。
fr 分配的是「容器减去固定轨道之后剩下的空间」，按数值比例分；auto 由内容决定大小，介于最小内容宽度与最大内容宽度之间。两者在空间充裕时看起来一样，空间紧张时行为完全不同。
最容易踩的坑是：fr 的尺寸下限默认是 auto（即最小内容宽度）。所以当某一列里有不换行的长内容时，这列不肯收缩到内容宽度以下，会把整个容器撑出横向滚动。
标准解法是把下限显式写死：用带零下限的比例写法（即把 minmax 的下限设为 0），允许轨道收缩到零，再让内容自己去换行或滚动。
Grid 的轨道尺寸单位看起来只有几行语法，但每一行在不同内容下表现不同。理解「空间充裕」与「空间紧张」这两种情形，是把它用对的关键。
这一篇用几张对照表把常用写法的语义固定下来，并给出溢出问题的标准修法。
1四种常用写法的语义
先把「固定」「弹性」「内容驱动」「混合」四类分清楚，选型就不会错。
| 写法 | 尺寸由什么决定 | 适用场景 |
|---|---|---|
| 固定值 | 完全由你指定 | 图标栏、固定宽度的侧边栏 |
| 比例单位 | 按剩余空间的比例分配 | 主内容与侧栏的宽度比 |
| 内容单位 | 由内部内容的大小决定 | 标签、按内容撑开的按钮组 |
| 区间写法 | 下限固定、上限按比例 | 响应式卡片，既要最小宽又要能伸展 |
比例单位只分「剩余」，不参与固定轨道的分配。所以只要混了固定列，弹性列拿到的就不是整个容器。
2内容太宽时为什么会撑破
这是 Grid 最常见的线上事故：一列里放了不换行的内容，整行溢出。根因是弹性格的默认下限不是零。
| 触发器 | 具体表现 | 修法 |
|---|---|---|
| 一段不换行的长单词或链接 | 该列拒绝收缩，容器出现横向滚动 | 给内容加断行规则，或把轨道下限设为可收缩到零 |
| 代码块或表格 | 内容按自身宽度撑开轨道 | 给内容容器加横向滚动，不要指望轨道裁剪 |
| 图片未限宽 | 按原始像素宽度撑开 | 给图片设最大宽度为百分之百 |
| 嵌套的弹性容器 | 子元素把父轨道顶开 | 在嵌套层同样把下限放开，或给子项设最小宽度为零 |
记住一句话：弹性轨道默认「不许比内容更窄」。想让它收，就得把这条默认规则覆盖掉。
3自动填充与固定列数怎么选
两条路线的差别在于「谁知道容器有多宽」，一个是布局自己算，一个是你在断点里写死。
- 自动填充路线
- 由容器宽度与最小卡宽自动决定列数，代码里不写断点，适合卡片网格
- 固定列数路线
- 在媒体查询里逐档指定列数，控制更精确，适合内容比例固定的页面骨架
- 自动填充的注意点
- 它会为「可能存在的空位」预留轨道，最后一行可能留出空白；想避免就换另一种填充方式
- 最小卡宽的选择
- 决定最小卡宽时要算上内边距与间隙，否则窄屏会出现意料之外的列数
自动填充适合「卡片数量不确定、宽度弹性」的场景；页面骨架这种比例固定的结构，写死在断点里反而更可控。
顺着这个问题往下用
全部工具总览 →相关疑问
同一个网格里能混用比例单位和固定宽度吗？
能。固定轨道先分走它要的宽度，剩下的才按比例分给弹性轨道，这也是「侧栏固定、主区自适应」的标准写法。
为什么设了比例单位还是出现了横向滚动条？
多半是某列里的内容无法收缩。先确认是不是不换行的长内容，再用可收缩到零的写法或给内容加断行规则。
比例单位和百分比有什么区别？
百分比相对容器算，还要自己扣掉间隙；比例单位分配的是「扣掉固定项与间隙之后的剩余」，不用手算，混用固定列时也更省心。
列数会随窗口变化吗？
用自动填充会，写在媒体查询里的不会。前者是布局自己算，后者是你在断点里规定。
继续看：相关问题与资料
全部问题解答 →内容说明：本页针对具体使用问题作答，方法步骤与数值由本站自行整理与复算，事实性内容以对应官方规范与文档为准。内容最后核对日期：2026-10-10。若发现错误，欢迎通过页脚反馈入口告知。