place-items是justify-items和align-items的简写，先水平后垂直；仅作用于网格容器直接子项，不控制子项内部布局；单值复用、双值分设，禁混单位与关键字；易与place-content、align-content混淆；受align-self/justify-self覆盖；IE不支持。
place-items简写到底替换了哪两个属性
place-items 是 justify-items 和 align-items 的简写，顺序固定：先水平（justify），后垂直（align）。写成 place-items: center stretch 等价于 justify-items: center + align-items: stretch。注意它只作用于**网格容器本身**的子元素对齐方式，不影响子项内部布局。
哪些值能用、哪些会失效
支持的值组合有限，必须成对出现或单值复用：
- 单值如
place-items: center→ 水平+垂直都设为center - 双值如
place-items: start end→justify-items: start+align-items: end - 无效写法：
place-items: center 10px（不能混用关键字和长度单位） - 不支持
place-items: flex-start（Grid里没有flex-start，只有start）
和place-content、align-content容易混淆的点
place-items 控制的是**所有直接子项在单元格内的对齐**；place-content 控制的是**整个网格轨道区域在容器中的对齐**（比如网格太小，想让它居中显示）；而 align-content 只在多行/多列且有剩余空间时才生效。三者作用对象完全不同，改错一个就可能完全没反应。
常见错误现象：place-items: center 写了但子项没居中？大概率是子项本身设置了 align-self 或 justify-self，它们优先级更高，会覆盖 place-items。
立即学习“前端免费学习笔记（深入）”；
IE不支持，但现代项目基本可放心用
Edge 16+、Chrome 57+、Firefox 52+、Safari 10.1+ 都支持 place-items；IE 完全不识别，会忽略该声明——所以如果你的项目还要兼容 IE，得回退到分别写 justify-items 和 align-items。另外，某些旧版 Safari（如 10.0）对 place-items: stretch 解析异常，建议测试下实际渲染效果。
真正容易被忽略的是：当网格项是 display: contents 或被 visibility: hidden 时，place-items 依然计算其占位，但视觉上不可见——这时候对齐“看起来”就失效了。
