fr单位按扣除显式尺寸后的剩余空间分配，非等分容器总宽；需与minmax()、auto-fit配合生效，混用%与fr会导致布局混乱，响应式推荐repeat(auto-fit, minmax(300px, 1fr))。
fr 单位不是“等分容器宽度”，而是按扣除显式尺寸（如 px、%、内容最小宽）后的剩余可用空间来分配份数。真正起作用的，是它和 minmax()、auto-fit 搭配时的协商逻辑，而不是单独写几个 1fr 就能自动适配。
fr 分配的是“减掉已占空间”之后的剩余部分
比如 grid-template-columns: 200px 1fr 2fr：浏览器先划出 200px 固定列，再把剩下的所有宽度按 1:2 切给后两列。如果容器宽 900px，剩下 700px，那两列分别是约 233px 和 467px —— 不是按总宽的 1/4 和 2/4 算的。
- 1fr ≠ 100%：百分比基于容器总宽；fr 基于“总宽 − 已确定尺寸”
- 混用
50% 1fr会混乱：% 先占一半容器宽，fr 再分剩下的一半，结果不可控 - 子项有
min-width: 300px？那一列至少 300px，fr 会被迫让步，其他列跟着压缩
让中间列自适应，左右固定宽度
常见三栏布局（左导航/右边栏固定，中间内容区伸缩），直接写 250px 1fr 250px 即可：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 左栏始终 250px，右栏始终 250px
- 中间列吃掉所有剩余空间，不依赖媒体查询
- 若希望左右栏“最小 250px、但可略撑开”，改用
minmax(250px, max-content) 1fr minmax(250px, max-content) - 注意：
max-content可能导致换行或溢出，需配合overflow: hidden或min-width: 0
响应式多列自动调整列数
不用写一堆 @media，一行代码搞定：
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))- 浏览器先看“最多能放几个 ≥300px 的列”，再把剩余空间按 1fr 均分
- 容器宽 800px → 最多放 2 列（2×300px=600px≤800px），剩 200px → 每列 +100px，变成 400px
- 容器宽 250px → 连一列都塞不下 300px，
auto-fit自动退为单列，1fr 占满 - 务必选
auto-fit（合并空轨道），别用auto-fill（留白）
防止内容撑爆 fr 列的实用细节
图片、长单词、未折行 URL 都会让 fr 失效——因为 Grid 默认按 min-width: auto 处理内容，优先保内容不被裁剪。
- 给图片加
max-width: 100%; height: auto - 给文本容器设
min-width: 0（解除 flex/grid 默认的 min-width: auto） - 防长单词溢出：加
word-break: break-word或overflow-wrap: break-word - IE11 完全不支持 fr，要用
@supports (display: grid) and (grid-template-columns: 1fr)包裹
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
