justify-items 未生效的主因是容器未设 display: grid/inline-grid；它仅作用于直系网格项，受 min-width、justify-self 和绝对定位等限制，且 ie11 不支持。
justify-items 设置后项目没填满单元格？检查 display 值是否为 grid
很多情况下 justify-items 看似不生效，根本原因是容器没真正变成 Grid 容器。它只对直接子元素（grid items）起作用，且前提是父容器设置了 display: grid 或 display: inline-grid。
- 如果父容器是
display: flex或display: block，justify-items完全被忽略 - 如果用了
display: subgrid，需确认父网格已定义轨道，否则行为不可靠 - 部分旧版 Safari 对
justify-items在subgrid中的支持不完整
正确写法示例：
.container {
display: grid;
grid-template-columns: 1fr 1fr;
justify-items: stretch; /* 默认值，等效于填满 */
}
justify-items: stretch 不总等于“铺满”——内容自身 min-width 会干预
justify-items: stretch 的实际效果是：让项目在行内轴（inline axis）上尽可能拉伸，但受制于其自身的 min-width、max-width 和内部内容的固有尺寸。
- 文字内容带空格或长单词时，
white-space: nowrap可能撑破单元格，导致无法“视觉上填满” - 图片或按钮等替换元素默认有
min-width: auto，会阻止拉伸；需显式设min-width: 0或width: 100% - 使用
justify-items: start+width: 100%在某些场景下反而更可控
常见修复写法：
.item img {
width: 100%;
min-width: 0; /* 关键：解除替换元素的默认最小宽度限制 */
}
justify-items 与 justify-self 混用时，后者优先级更高
单个项目可以同时受容器级 justify-items 和自身 justify-self 控制，后者会覆盖前者。这在需要局部调整时很实用，但也容易误以为全局设置失效。
-
justify-items: center下，某个 item 设justify-self: end→ 该项目右对齐，其余居中 -
justify-self: auto表示退回到justify-items的值，不是“重置为默认” - 若项目是
position: absolute，justify-self无效 —— 绝对定位脱离了 Grid 布局流
调试建议：在浏览器开发者工具中 hover 查看 computed 样式，确认最终生效的是 justify-self 还是继承自 justify-items。
IE11 不支持 justify-items，但可以用 align-items 替代（仅限单行）
IE11 完全不识别 justify-items，也没有 justify-self。如果必须兼容，得换思路：
- 仅当所有项目高度一致、且只需水平填满时，可改用
align-items: stretch+ 调整grid-template-rows配合width: 100% - 更稳妥的做法是降级为
display: flex容器，用flex: 1或width: 100%手动控制 - PostCSS 插件如
postcss-grid-kiss无法自动 polyfilljustify-items，别依赖它
真实项目里，只要明确放弃 IE11，justify-items 就是干净可靠的方案；一旦要兜底，就得接受逻辑分叉和额外维护成本。
最常被忽略的一点：justify-items 影响的是所有直系 grid item 的**行内轴对齐**，但它不改变网格轨道本身大小，也不触发重排 —— 如果你发现填满后内容溢出或换行异常，问题大概率出在 grid-template-columns 定义或项目内部的盒模型上，而不是这个属性本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
