1fr本身不撑容器，而是浏览器按规范将其等价于minmax(min-content, 1fr)，先预留内容最小宽度（如长URL），再分剩余空间；需用minmax(0, 1fr)配合子项min-width: 0才能真正释放弹性。
1fr 本身不撑容器，是它默认的 min-content 下限在抢空间
设置 grid-template-columns: 1fr 1fr 后容器横向变宽、出现滚动条，不是 1fr 主动“撑开”，而是浏览器按规范把它等价于 minmax(min-content, 1fr) —— 每列先预留「内容最小宽度」（比如一个未换行的 https://example.com/very-long-path），再分剩余空间。这个 min-content 可能远超你预期，直接把整行顶宽。
验证方法：打开开发者工具 → 选中 Grid 容器 → 切到 Computed 面板 → 查看子项的 min-width 值。若显示 auto 或具体像素（如 320px），就是它在作祟。
- 临时加
outline: 1px solid red到子项，观察是否明显溢出轨道边界 - 给子项加
white-space: nowrap会立刻暴露问题，但根源不在这个声明 - 嵌套了 Flex/Grid 的子项也得同步加约束，否则撑开会逐层传导
用 minmax(0, 1fr) 替代 1fr 才算真正释放弹性
minmax(0, 1fr) 不是技巧，是让 1fr 按你直觉工作的必要写法。它显式告诉浏览器：“这列可以缩到 0，别管内容多宽”。仅改 grid-template-columns 还不够，必须配合子项的 min-width: 0，否则 overflow 截断不会生效。
正确组合：
立即学习“前端免费学习笔记（深入）”；
grid-container {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
grid-container > * {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}- 别写成
minmax(0 1fr)（语法错误）或minmax(0, auto)（无效） - 用
repeat()时优先选repeat(auto-fit, minmax(0, 1fr))，auto-fill会在窄屏留空轨道 -
minmax(0, 1fr)对grid-template-rows同样适用，但需配min-height: 0
display: inline-grid 是最隐蔽的“锁宽”元凶
如果整个网格区域窄得只够放一个字，先检查 display 值。设成 inline-grid 后，容器表现和 span 一样，宽度只包裹内容，grid-template-columns: 1fr 和 width: 100% 全部失效。
- 快速验证：开发者工具里看 Computed 的
display是否为inline-grid - 绝大多数布局场景必须用
display: grid，inline-grid仅适合图标组、行内按钮这类微布局 - 某些 CSS 重置库或旧版框架可能默认设了
inline-grid，需手动覆盖
父容器没高度或宽度上下文，1fr 就没空间可分
1fr 不是魔法均分器，它只分配父容器已确定的可用空间。若父容器是默认 width: auto 的块级元素，又没设 width、flex: 1 或 min-width: 0，它的实际宽度可能仅由内容撑开——结果两列 1fr 被挤在几像素宽里，Computed 中列宽显示为 0px。
- 对高度敏感的布局（如
grid-template-rows: 1fr 1fr），父容器必须有明确height或min-height（例如min-height: 100vh） - 若父容器是 Flex 项目，要加
flex: 1或width: 100%，否则1fr无基准 - IE11 和 Safari 9–10.1 完全不识别
1fr，整条声明会被静默丢弃，回退为单列流
实际修复时，最常漏掉的是三件事：父容器没显式尺寸、子项没设 min-width: 0、误用了 inline-grid。这三个点串起来，几乎覆盖了 90% 的“1fr 撑开”现象。
