place-items是justify-items和align-items的简写，先水平（justify-items）后垂直（align-items），仅作用于网格容器直接子项在单元格内的对齐。
place-items 本质是哪两个属性的简写
place-items 是 justify-items 和 align-items 的简写，只作用于网格容器（grid container），对 flex 容器无效。它控制的是所有直接子项在网格单元格内的对齐方式，不是控制整个网格在父容器里的位置。
- 第一个值是
justify-items（行内轴方向，即水平方向） - 第二个值是
align-items（块轴方向，即垂直方向） - 如果只写一个值，比如
place-items: center，则两个方向都用这个值
注意：place-items 不影响网格轨道本身的大小或位置，只影响子元素在各自网格区域中的对齐。
哪些值能用，哪些会失效
place-items 接受的值和 justify-items/align-items 一致，但有关键限制：
- ✅ 支持：
start、end、center、stretch、baseline - ❌ 不支持：
flex-start、flex-end（这些是 flex 专用值，对 grid 无效） - ❌ 不支持单侧值如
left或right（grid 中必须用start/end配合direction或writing-mode）
常见误用：place-items: left center 会完全失效，浏览器忽略整条声明；正确写法是 place-items: start center。
立即学习“前端免费学习笔记（深入）”；
和 place-content、justify-content 的区别在哪
这三个容易混淆，但作用对象和层级完全不同：
-
place-items：子项在各自网格区域内的对齐（每个格子单独生效） -
place-content：整个网格轨道块（rows + columns）在容器内的对齐（类似“网格整体居中”） -
justify-content：仅控制行内轴上轨道块的分布（比如justify-content: space-between让列间距均分），不处理垂直方向
举个例子：一个 2×2 网格容器宽高固定，里面四个子项都设了 place-items: center，它们各自在自己的格子里居中；而 place-content: center 是让这 2 行 2 列组成的整个网格块，在父容器里居中。
实际写的时候要注意的兼容性和 fallback
place-items 在现代浏览器中支持良好（Chrome 57+、Firefox 45+、Safari 10.1+），但 IE 完全不支持，且无等效替代属性。
- 如果需要兼容老版本 Safari（<10.1）或旧 Android Webview，不能只靠
place-items - 没有单属性 fallback：你无法用
justify-items+align-items分开写来“降级”，因为它们本就是place-items拆开的形态，写全反而冗余 - 真正要兼容时，得回归到更底层的布局策略，比如用
display: flex包一层，或用margin: auto配合grid子项显式尺寸
最常被忽略的一点：很多人以为 place-items 能让子元素脱离网格流居中，其实它只是对齐，不会改变 grid-area 或 row/column 的分配逻辑——如果子项没被分配到具体格子（比如没写 grid-column），它仍按自动轨迹排列，place-items 只决定它在那个默认格子里怎么摆。
