Grid item 未设 width 却撑满整列，是因为 justify-items: stretch 默认拉伸；真正影响宽度的是 grid-template-columns、父容器宽度及 min-width: auto 是否被重置为 0。
为什么 grid item 没设 width 却自动撑满整列？
因为 justify-items: stretch（默认值）在起作用——它让所有网格项在行内轴（inline axis）方向自动拉伸，填满所在轨道的宽度。这不是“继承父宽”，而是 Grid 布局引擎的默认对齐行为。
常见误判现象：width: 100% 写了没变化、删掉反而还一样；给 item 加 display: block 或 box-sizing: border-box 也无效——这些操作不干预轨道分配逻辑，纯属多余。
真正决定宽度的是三件事：grid-template-columns 定义的轨道尺寸、父容器是否具有明确宽度（如 width: 100% 或 max-width: 1200px）、以及 item 自身是否被 min-width: auto 锁死收缩能力。
为什么加了 min-width: auto 就不撑开了？
网格项默认 min-width: auto，意思是“至少要容下内部内容的最小宽度”。如果 item 里有长单词、未折行文本或一张大图，它宁可溢出容器，也不愿压缩到 1fr 分配的轨道宽度里——结果就是“看着像没撑满”，其实是被内容顶住了。
解决办法很简单：显式重置为 min-width: 0。
- 这是最常用且必要的补救，尤其当 item 包含
img、textarea或长 URL 文本时 - 不要同时写
width: 100%，它和1fr轨道逻辑冲突，且在有gap时会算错基准 - 删掉
max-width、flex: 1等干扰属性，它们会劫持 Grid 的尺寸控制权
grid-column: 1 / -1 不生效，是不是写错了？
不是语法错，是父容器没定义列轨道。grid-column: 1 / -1 的 -1 指向“最后一列右侧线”，但若没写 grid-template-columns，浏览器按隐式网格处理，-1 实际只指向第 2 条线（即第一格右侧），所以看起来只占一格。
必须显式声明列，例如：
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 或 repeat(3, 1fr) */
}
此时 -1 才指向第 4 条线，grid-column: 1 / -1 才真能横跨整行。用 auto-fit 时也要注意：内容不够多，列数可能退化为 1，-1 就又失效了。
想让 item 内部内容填满单元格，该调 width 还是别的？
别碰 width。Grid item 的内容填满行为由 justify-content（主轴）和 align-content（交叉轴）控制，不是靠 width: 100%。
比如一个 div 里放文本，默认 justify-items: stretch 已让它横向撑满；若想让内部子元素也拉伸，应在子元素上设：
-
width: 100%（仅当父 item 是明确 track 宽度时才安全） - 更稳妥的是用
justify-self: stretch或align-self: stretch直接控制对齐 - 若内部是 flex 容器，优先用
flex: 1而非 width，避免嵌套尺寸冲突
真正容易被忽略的点是：撑不满往往不是 Grid 写得不对，而是 min-width: auto + 长内容 + 缺少显式列定义，三者叠在一起，让 1fr 彻底失效。调样式前，先看这三点有没有漏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
