justify-items: stretch 默认拉伸网格项填满单元格宽度，忽略自身 width；center 则保持原宽并水平居中。例如在 200px 单元格中，100px 的 div 使用 stretch 会变为 200px，使用 center 仍为 100px 并居中。选择取决于是否需占满空间。
在 CSS Grid 布局中，justify-items 属性用于控制网格项在其所在网格单元格内的水平对齐方式。当使用 stretch 和 center 作为 justify-items 的值时，它们的行为有明显区别。
justify-items: stretch
这是 justify-items 的默认值（对于块级内容）。它会让网格项在行内方向上尽可能地拉伸，填满整个网格单元格的宽度。
- 网格项会忽略自身的
width设置（除非设置了最大宽度或使用了固定尺寸） - 适合希望内容填满可用空间的布局场景
- 如果网格项内部是文本或弹性容器，可能需要额外设置
max-width防止过度拉伸
justify-items: center
该值会使网格项在其网格单元格中水平居中对齐，不会拉伸。
- 网格项保持其固有宽度（由内容或显式 width 决定）
- 多余的空间在左右两侧平均分配
- 适合需要居中显示、不希望内容被拉长的设计
实际示例对比
假设有一个两列的 Grid 容器，每个单元格宽 200px：
立即学习“前端免费学习笔记（深入）”；
- 使用
justify-items: stretch：一个宽度为 100px 的 div 会被拉伸到 200px - 使用
justify-items: center：同样的 div 仍为 100px 宽，但在 200px 的单元格中居中显示
基本上就这些。选择哪个取决于你希望子元素是否占满单元格宽度。stretch 是“撑满”，center 是“居中不撑”。
