justify-self: stretch 仅对已有网格项生效，要求父容器为 display: grid、轨道明确（如 1fr）、子项无固定宽高且需配合 min-width: 0、min-height: 0 等属性协同作用。
justify-self: stretch 为什么有时不生效
它只对单个网格项起作用，前提是该网格项的父容器是 display: grid，且该项**没有设置固定宽高（如 width、height、min-width 等）**。一旦设置了显式的尺寸，stretch 就会被忽略。
常见错误现象：justify-self: stretch 写了但网格项还是“缩在左上角”；检查发现父元素其实是 display: inline-grid 或者用了 grid-template-columns: fit-content(200px) —— 这类限制会剥夺拉伸所需的可用空间。
- 确保父容器使用
grid-template-columns/grid-template-rows定义了明确的轨道（比如1fr、auto），而不是全靠内容撑开 - 避免给网格项设
width、max-width、min-width，哪怕只是min-width: auto也可能干扰 - 如果用
place-self，注意它同时控制justify-self和align-self，别被另一个轴的行为带偏判断
空单元格里网格项不填满？先确认是不是真“空”
所谓“空单元格”，往往是指网格轨道存在但没放子元素的位置。但 justify-self: stretch 只作用于**已存在的网格项**，对完全空白的格子毫无影响——它不是“填充空位”的工具，而是“调整已有项在自身格子内的对齐方式”。
使用场景：你有一个 3×3 网格，只放了 4 个子元素，想让其中某个占满它所在的整行或整列？那得靠 grid-column / grid-row 跨列跨行，而不是依赖 justify-self。
立即学习“前端免费学习笔记（深入）”；
- 空轨道不会自动渲染，也不会触发任何对齐行为；浏览器只布局你写的那些
<div> <li>如果看到“空单元格有背景色却没撑开”，大概率是给网格容器设了 <code>gap或padding，误以为那是内容区域 - 想视觉上“补全”空位，只能手动添加空
<div> 并设 <code>justify-self: stretch; align-self: stretchjustify-self: stretch 在 Flexbox 里完全无效
这是最常踩的坑：把网格的属性抄到 Flex 容器里，结果毫无反应。
justify-self是 Grid 专属属性，在 Flex 布局中不被识别，也不报错，直接静默失效。性能/兼容性影响：现代浏览器都支持
justify-self，但 IE 完全不支持；如果项目还需兼容 IE，不能依赖它做关键布局，得用width: 100%+margin模拟，或者改用display: contents配合其他方案。- Flex 容器内想控制单个子项宽度，请用
flex-grow、flex-basis或width - Grid 中混用
justify-content: stretch是错的——这个值根本不存在，justify-content只接受start/end/center/space-between等 - 注意
justify-self的初始值是auto，它会继承justify-items，所以全局设了justify-items: start后，每个项都要显式覆盖才能拉伸
替代方案：当 stretch 不够用时该看哪几个属性
真正决定网格项能否“填满单元格”的，是一组协同工作的属性，
justify-self: stretch只是其中一环。漏掉任何一个，效果就断掉。可给出简短示例：
.item {<br> justify-self: stretch;<br> align-self: stretch;<br> /* 缺一不可：下面两个确保它有空间可伸 */<br> min-width: 0;<br> min-height: 0;<br>}-
min-width: 0和min-height: 0是关键补丁，防止内容（比如长单词、图片）强行撑破拉伸逻辑 -
box-sizing: border-box要配齐，否则padding和border会让实际尺寸超出轨道 - 如果网格项内部还有子元素并设置了
width: 100%，注意它们是否受contain: layout或overflow: hidden影响而截断
事情说清了就结束。真正卡住的时候，八成不是
justify-self写错了，而是轨道没定义好、尺寸被锁死、或者压根没意识到它只管“已有项”。 - Flex 容器内想控制单个子项宽度，请用
