1fr未撑开子元素的根本原因是网格项默认min-width: auto阻止收缩，需设min-width: 0；父容器须有明确宽度；grid-column: 1 / -1要求显式定义列轨道；响应式推荐auto-fit配合minmax(280px, 1fr)。
直接用 grid-template-columns 或 grid-template-rows 配合 1fr 即可，但必须确保父容器有明确尺寸、子元素没被 min-width: auto 锁死——否则“填满”只是幻觉。
为什么 1fr 没让子元素撑开？
根本原因不是 1fr 失效，而是网格项默认带 min-width: auto（文本或图片内容会阻止它收缩），导致它宁可溢出也不“让出空间”给 1fr 分配逻辑。
- 给子元素加
min-width: 0是最常见且必要的补救 - 避免同时写
width: 100%—— 它和1fr冲突，且在有gap时会算错基准 - 确认父容器有明确宽度：比如
width: 100%、固定值，或在 flex 容器中设了flex-basis: 100% - 删掉子元素上任何
max-width、flex相关属性（如flex: 1），它们会劫持网格的尺寸控制权
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，后者会覆盖前者
自动填充剩余空间的响应式写法
日常卡片列表、仪表盘等场景，90% 应该用 auto-fit，而不是 auto-fill。二者语法一样，行为却相反。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))) -
auto-fit会合并空轨道，让现有项拉伸填满整行；auto-fill则保留所有可能列，小屏下容易右侧留白甚至横向滚动 -
minmax()的第二个参数只能是1fr或max-content；写成minmax(280px, 2fr)会被浏览器静默降级为max-content，列宽失控 - 注意
gap会占用总宽度，但minmax()的最小值不包含 gap，实际列数可能比预期少一列
真正决定“填满”的，从来不是子元素自己写了什么 width，而是父容器的轨道定义 + 子元素是否允许被压缩（min-width: 0）+ 是否干扰了网格的自动放置逻辑。这三个点漏掉任何一个，1fr 就只是个摆设。
