fr单位分配的是扣除固定宽、minmax最小值、min-content宽度及gap后的剩余空间，而非仅容器宽减gap；auto列优先占用min-content宽度，可能挤压fr列；嵌套grid需设min-width:0防内容撑出。
可用宽度不是容器总宽减gap
很多人以为 grid-template-columns: 1fr 2fr 的“剩余空间”就是容器宽度减去 gap，其实漏掉了至少四类必须先扣掉的尺寸：所有固定宽（如 100px）、所有 minmax() 的 min 值、所有内容的 min-content 宽度（比如长单词或未换行图片）、滚动条占用空间（尤其在 Windows 下）。只有这些全扣完，剩下的才是 fr 能分的“可用宽度”。
mixing fr 和 minmax() 时怎么算可用宽度
当列定义含 minmax(200px, 1fr)，它不参与初始固定占位，但它的 200px 是硬性下限——意味着可用宽度计算前，系统会先预留出所有此类 min 值之和。例如 grid-template-columns: minmax(200px, 1fr) minmax(150px, 2fr) 100px，容器宽 800px，gap: 10px：
- 先扣固定项：
100px - 再扣所有
minmax()的min：200px + 150px = 350px - 再扣
gap（如果是两列，一个 gap）：10px - 剩余可用宽度 =
800px − 100px − 350px − 10px = 340px - 这部分才交给
1fr和2fr按比例分
auto 列会吃掉可用宽度的“优先权”
auto 不是“按内容自适应”那么简单，它是基于 min-content 或 max-content 计算的，且优先级高于 fr。写成 grid-template-columns: auto 1fr 时：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 第一列先按内容撑开到最小必要宽度（比如一段没换行的 URL，可能达 500px）
- 剩余宽度 = 容器宽 − 第一列实际宽度 − gap
- 这个剩余值才给
1fr—— 如果第一列已经占满甚至溢出，1fr可能被压缩到 0 或触发滚动 - 常见错误：用
auto放标题+图标组合，结果主内容列消失，其实是图标盒模型撑大了auto列
嵌套 Grid 中的可用宽度容易被忽略源头
子 Grid 的可用宽度 ≠ 父 Grid 的列宽，而是取决于父项自身的 width 和 min-width。如果父项是 1fr 列，但没设 min-width: 0，内部长文本会突破父项边界，导致子 Grid 实际可分配宽度远小于预期。
真正可控的做法是：
- 父项加
min-width: 0防文字撑出 - 显式设
width: 100%（不能依赖 fr 继承） - 子 Grid 再定义自己的
grid-template-columns，此时它的可用宽度才以父项内容盒为基准
fr 单位永远只认当前容器的 content box，不跨层传导；所谓“继承弹性”，本质是手动重置约束链。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
