place-items 是 align-items 与 justify-items 的简写，仅作用于 Grid 直接子项在各自单元格内的对齐；place-content 是 align-content 与 justify-content 的简写，控制整套网格轨道在容器内的定位。
place-items 是 align-items + justify-items 的简写
place-items 本质就是把 align-items（控制交叉轴对齐）和 justify-items（控制主轴对齐）合在一起写。它只影响**每个网格项在各自单元格内**的位置，不改变网格轨道本身的位置。
常见写法：place-items: center 等价于 align-items: center; justify-items: center；place-items: start end 表示垂直靠上、水平靠右。
- 只对 Grid 容器的**直接子元素**生效，嵌套一层就失效
- 如果子元素设了
align-self或justify-self，会覆盖place-items的值 - 当子元素是块级且未限制宽高时，
justify-items: center看不出效果——因为默认stretch，得配合justify-self: center或显式设宽
place-content 是 align-content + justify-content 的简写
place-content 控制的是**整套网格轨道在容器内的位置**，也就是“网格本身怎么放”，不是“里面的内容怎么放”。它只在容器尺寸大于网格轨道总尺寸时才有效果。
例如：容器宽 500px，但 grid-template-columns: 100px 100px 总宽才 200px，这时 place-content: center 才会让这两列整体水平居中。
立即学习“前端免费学习笔记（深入）”；
- 单行单列网格（比如没写
grid-template-rows也没写grid-template-columns）下，place-content通常无效——因为轨道尺寸等于容器尺寸，没多余空间可居中 - 想强制触发，可加
grid-template-rows: 1fr或grid-template-columns: 1fr，让轨道变成弹性尺寸 - 它和
place-items作用对象完全不同，混用不会冲突，但目的必须分清：一个管“人坐格子哪”，一个管“格子摆容器哪”
为什么 place-items: center 没反应？三个高频漏点
浏览器不报错，但 computed styles 里看不到居中效果，大概率卡在这三处：
- 父容器没写
display: grid或display: inline-grid——place-items在非 Grid 容器上完全被忽略 - 父容器高度塌陷，比如没设
height、min-height，而子元素又没撑开它，实际 height 是 0px - 目标元素被
<div>或<Fragment>包了一层，不再是 Grid 容器的**直接子元素**
检查方式：打开 DevTools → Elements → 看目标元素的 computed 样式里有没有 align-items 和 justify-items 的计算值；如果没有，说明 place-items 根本没生效。
单元素居中该用 place-self 而不是 place-items
如果只想让某一个图标或按钮居中，其余文字左对齐，place-items: center 会把所有子项全拉到中心堆叠，这不是你想要的。
正确做法是给那个元素单独加：place-self: center（等价于 justify-self: center; align-self: center）。
- 它只影响当前元素，不影响兄弟节点
- 若该元素跨行（如
grid-row: 1 / 3），align-self: center会在它所占的两行合并后的轨道内居中，不是整个容器高度 - 同样要求它是 Grid 容器的直接子元素，且父容器有明确高度空间
真正要让一个卡片在视口正中，往往得 place-items: center 和 place-content: center 配合用，并补上 min-height: 100vh——否则高度不确定时，布局极易意外塌缩。
