place-content 在 grid 容器上没效果，通常因容器无固定宽高、未触发BFC、使用 inline-grid、或仅单隐式轨道无间隙可分配；它控制轨道组在容器内的对齐，非子项居中。
place-content 为什么在 grid 容器上没效果
常见错误是给 grid 容器设了 place-content: center，但子项完全不居中——大概率因为容器没设固定尺寸或没触发块级格式化上下文。grid 的 place-content 只对**轨道之间的空隙**起作用，不是对子元素“整体居中”，它控制的是行轴和列轴上**轨道组（track group）的对齐方式**，前提是容器有“多余空间”可分配。
实操建议：
- 确认容器有明确的宽高（比如
width: 300px; height: 200px;），或者至少设置了min-height: 100vh这类撑开高度的规则 - 避免父容器是
display: inline-grid—— 行内网格默认不占满父宽，place-content很难看出效果，优先用display: grid - 如果子项只有一行一列（比如单个
div），且没定义grid-template-rows或grid-template-columns，那其实只有一条隐式轨道，place-content没空间可“居中”，此时该用justify-items+align-items
place-content 和 justify-content / align-content 的关系
place-content 是 justify-content（行轴）和 align-content（列轴）的简写，但它**不替代** justify-items 或 align-items。前者管“轨道组在容器里的位置”，后者管“单个网格项在其单元格内的位置”。
使用场景举例：你有一堆等宽卡片排成 3×3 网格，容器比网格内容高很多，想让这 3 行轨道整体垂直居中，同时 3 列轨道整体水平居中——这时 place-content: center 才真正生效。
立即学习“前端免费学习笔记（深入）”；
参数差异注意：
-
place-content: start end=justify-content: start; align-content: end -
place-content: center等价于justify-content: center; align-content: center - 如果只写一个值（如
place-content: stretch），它会同时作用于两个轴
兼容性与 Flexbox 的混淆点
IE 完全不支持 place-content，Edge 16+、Chrome 57+、Firefox 52+ 开始支持。但更常踩的坑是：有人在 Flex 容器里误用 place-content——它**只对 grid 容器有效**，Flex 布局必须用 justify-content + align-items 组合。
性能影响很小，但要注意：如果容器尺寸动态变化（比如响应式宽度），place-content 的行为会随可用空间实时重算，不会触发重排，但若配合 grid-auto-rows 等隐式轨道生成，可能间接影响布局计算路径。
容易被忽略的一点：当使用 grid-template-areas 时，place-content 依然只作用于轨道间隙，不会移动命名区域的位置；区域位置由 grid-area 和模板定义决定，跟 place-content 无关。
什么时候该换用 justify-items + align-items
如果你的目标是让每个网格项（尤其是单个项）在各自单元格里居中，而不是调整轨道组位置，那就该用 justify-items 和 align-items。例如：一个 grid 容器里只有一个子元素，你想让它在容器正中央显示——这时候 place-content 几乎无效，而 justify-items: center; align-items: center 才是对的解法。
典型误用现象：place-content: center 设了，但子项紧贴左上角，检查发现容器没设 grid-template-rows 和 grid-template-columns，导致所有内容挤在隐式第一行第一列里，没有“多出来的轨道间隙”供 place-content 分配。
实操判断口诀：有多个轨道（显式或足够多隐式）且想调它们的整体位置 → 用 place-content；想调每个格子里的内容 → 用 justify-items/align-items；只有一格还想居中 → 优先考虑后者，或直接给子项设 margin: auto。
复杂点在于：grid 的隐式轨道行为、自动尺寸计算、以及 place-content 对 gap 的处理方式，三者叠加后，视觉反馈常常和直觉相反。最稳的办法是先用 grid-template-rows: 1fr; grid-template-columns: 1fr; 显式创建单格，再决定用哪组属性。
