place-items是CSS Grid中用于同时设置align-items和justify-items的简写属性，可统一控制网格子元素在交叉轴和主轴上的对齐方式。语法为place-items: align-items justify-items; 支持start、end、center、stretch等值，常用于让所有子项居中或对齐。例如place-items: center可实现子元素在单元格内水平垂直居中，简化布局代码并提升效率，适用于现代浏览器，仅作用于直接子元素。
在使用 CSS Grid 布局时，子元素的对齐方式可以通过 place-items 简化控制。这个属性能同时设置交叉轴和主轴上的对齐方式，让网格容器内的所有子项统一居中或对齐，非常实用。
什么是 place-items？
place-items 是一个简写属性，用于设置 align-items（垂直对齐）和 justify-items（水平对齐）的组合值。它作用于网格容器，影响所有直接子元素。
语法格式：
place-items: align-items justify-items;
立即学习“前端免费学习笔记（深入）”；
如果只写一个值，第二个值默认与第一个相同。
常用对齐值说明
每个方向可选的关键词包括：
- start：靠向起始边
- end：靠向结束边
- center：居中对齐
- stretch：拉伸填满（默认值）
例如：
place-items: center; 表示子元素在单元格内水平和垂直都居中。
place-items: start end; 表示垂直靠上，水平靠右。
实际应用示例
假设有一个网格容器，包含多个子项，希望它们都在各自的网格区域内居中：
.container {
display: grid;
grid-template-columns: repeat(3, 100px);
gap: 10px;
place-items: center;
}
这样每个子元素都会在其对应的网格格子中居中显示，无论内容多少。
若只想垂直居中、水平左对齐：
place-items: center start;
兼容性与注意事项
现代浏览器基本都支持 place-items，但在一些旧版本 Safari 中可能需要测试。若需更精细控制个别子项，仍可用 align-self 或 justify-self 单独调整。
注意：该属性只作用于直接子元素，嵌套的后代不会受影响。
基本上就这些。用好 place-items 能大幅减少重复代码，让 Grid 布局更简洁高效。
