place-items 是最直接的水平垂直对齐方式，但子项溢出、轴向混淆或 justify-self 覆盖会导致其“看似失效”；justify-content 仅在网格内容区小于容器时生效，控制整个网格轨道区域的水平位置，非单个子项。
place-items 是最直接的水平（加垂直）对齐方式，但仅靠它不保证视觉居中——子项溢出、轴向混淆、justify-self 覆盖都会让它“看似失效”。
grid-container 的 justify-content 只在内容区小于容器时起作用
它控制的是整个网格内容块（grid track area）在容器内的水平位置，不是单个子项。常见误解是设了 justify-content: center 就能让所有子项居中，结果没反应。
- 必须满足：网格列总宽（比如
grid-template-columns: 100px 100px→ 200px） width: 500px），多余空间才会被分配 - 如果用了
grid-auto-flow: column，justify-content实际控制的是垂直方向，别按默认水平去猜 - 它和
justify-items完全无关，混用还指望两者叠加生效，只会互相干扰
justify-items 对子项无效？检查是否写了 justify-self
justify-items 只影响那些**没显式声明 justify-self** 的子项。这是最常被忽略的覆盖逻辑断点。
- 容器设了
justify-items: center，但某个<div>写了justify-self: end→ 它立刻脱离容器控制 - 方向受
direction: rtl影响：justify-items: start在 RTL 下实际靠右，别硬记“左对齐” - 对跨多格的子项（如
grid-column: 1 / -1），对齐基准是它所占整个网格区域的中心，不是内容盒中心——调试时加outline: 1px solid red能立刻看清
表单里 input 被截断或撑开？补上 min-width: 0
place-items: center 或 justify-items: center 不压缩子项尺寸。而 input、textarea 默认有 min-width: auto，在窄网格区域里会强行撑破布局。
立即学习“前端免费学习笔记（深入）”；
- 必须给所有表单控件加
min-width: 0和min-height: 0，尤其包裹了 flex 子级的<div> -
gap和margin别混用：前者是轨道间距，后者是子项外边距；叠加会导致间距翻倍，grid-auto-flow: dense下margin还可能被折叠 - label 不要依赖
text-align: right对齐——它在单元格内会被justify-items覆盖；改用justify-self: end更精准
真正卡住人的往往不是属性不会写，而是子项悄悄继承了父级以外的样式、或者跨格后对齐基准变了却没意识到——调错一次，先 outline 看占位，再查 justify-self 是否存在，最后确认 min-width 是否兜底。
