place-content 控制网格轨道组在容器内的对齐，仅当容器尺寸大于轨道总尺寸产生多余空间时才生效；它对齐的是行、列轨道构成的骨架，而非子元素本身。
place-content 控制的是轨道组在容器内的位置，不是子元素本身的位置。它只在容器有“多余空间”时才生效，否则看起来像没反应。
place-content: center 没效果？先看容器有没有可分配的空隙
place-content 作用对象是 grid 容器中所有行轨道和列轨道组成的“轨道组”，对齐基准是容器尺寸与轨道总尺寸的差值。如果两者相等，就没有空隙可分配，属性自然不触发。
- 父容器
height: 500px，但grid-template-rows: 1fr 1fr已占满全部高度 →place-content无空间可居中 - 父容器
min-height: 100vh，而grid-template-rows: 100px 100px（总高 200px）→ 多余 80vh 空间存在，place-content: center才会把这两行轨道整体推到垂直中间 - 只写
display: grid但没定义grid-template-rows或grid-template-columns→ 只有隐式单行单列轨道，place-content无多轨道可对齐，基本无效
place-content 和 place-items 容易混淆的两个关键点
它们名字像、写法像，但对齐目标完全不同：
-
place-items: center：让每个子元素在其**所属网格单元格内**居中（哪怕它只占第一格，也停在那格正中央） -
place-content: center：让整个**行轨道+列轨道构成的网格骨架**在父容器里居中（子元素相对这个骨架的位置不变） - 想让一张
3×3卡片网格在视口里居中？用place-content；想让每张卡片里的图标居中？用place-items
inline-grid 容器下 place-content 很难看出效果
display: inline-grid 的容器默认宽度由内容决定，不自动撑满父容器，导致横向/纵向都缺乏“多余空间”，place-content 缺少对齐参照。
立即学习“前端免费学习笔记（深入）”；
- 优先改用
display: grid，并配合width/min-width/min-height显式设限 - 临时调试时加
background: #eee和min-height: 300px，能快速验证是否真有空隙可分配 - 若必须用
inline-grid（比如内联布局场景），需额外包裹一层块级容器，并在该外层设place-content
真正容易被忽略的是：place-content 的生效完全依赖轨道组与容器尺寸的差值——它不关心子元素长什么样，只数“轨道占了多少、容器剩多少”。调不对，不是语法错，而是没给它留出可操作的空间。
