1fr填满剩余空间失败的三大原因是：父容器无明确宽度、子元素min-width: auto未重置为0、列轨道未显式定义；需设min-width: 0、明确grid-template-columns、避免干扰属性。
直接用 1fr 就能填满剩余空间，但 90% 的失败不是因为写错了语法，而是父容器没尺寸、子元素被 min-width: auto 锁死，或者列轨道根本没显式定义。
为什么 1fr 看起来没生效？
根本原因不是 1fr 失效，而是网格项默认带 min-width: auto（来自文本或图片的固有最小宽度），导致它宁可溢出也不收缩，1fr 就分不到“可分配空间”。
- 给要填满的子元素加
min-width: 0—— 这是最常见且必要的补救 - 确认父容器有明确宽度：比如
width: 100%、固定值，或在 flex 容器中设了flex-basis: 100% - 删掉子元素上任何
max-width、flex相关属性（如flex: 1），它们会劫持网格的尺寸控制权 - 避免同时写
width: 100%和1fr—— 前者在有gap时会算错基准，且和网格轨道逻辑冲突
grid-column: 1 / -1 不跨整行？先看列定义
grid-column: 1 / -1 本意是横跨整行，但它依赖父容器存在**显式列轨道**。如果只写了 display: grid 却没设 grid-template-columns，浏览器按隐式网格处理，-1 就指向第 2 条线（即只占第一格）。
- 必须显式声明列，例如：
grid-template-columns: 200px 1fr或grid-template-columns: repeat(3, 1fr) - 用
auto-fit或auto-fill时，要保证内容足够触发多列；否则仍只有一列，-1就退化为2 - 别在同一个子元素上又写
grid-column: 1 / -1又写grid-column-start: 2，后者会覆盖前者
响应式下自动填满该用 auto-fit 还是 auto-fill？
日常卡片列表、仪表盘等场景，应该用 auto-fit。它会合并空轨道，让现有项拉伸填满整行；auto-fill 则保留所有可能列，小屏下容易右侧留白甚至横向滚动。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))) -
minmax()的第二个参数只能是1fr或max-content；写成minmax(280px, 2fr)会被静默降级为max-content，列宽失控 -
gap会占用总宽度，但minmax()的最小值不包含gap，实际列数可能比预期少一列
真正决定“填满”的三个硬条件
漏掉任何一个，1fr 就只是个摆设：
- 父容器有明确的内联尺寸（inline size），不能靠内容撑开
- 子元素允许被压缩 ——
min-width: 0是底线，不是可选项 - 没有其他 CSS 属性干扰网格的自动放置逻辑（比如
float、display: inline-block、未设宽的flex包裹）
