place-content 是 CSS Grid 中用于同时设置 align-content 和 justify-content 的简写属性，可简化居中与对齐布局。通过一行代码如 place-content: center，即可实现网格内容在容器中的水平垂直居中，适用于模态框、登录页等场景；结合 auto-fit 或 auto-fill 能创建自适应响应式布局，配合 space-between、start 等值灵活控制不规则网格的间距与排列，提升布局效率与一致性。
想要让网页布局更简洁、居中更精准，place-content 是 CSS Grid 中一个非常实用的属性。它能同时控制网格容器中内容在交叉轴和主轴上的对齐方式，简化代码并提升布局效率。
什么是 place-content？
place-content 是 align-content 和 justify-content 的简写属性，用于设置网格行与列之间的对齐行为。
它接受两个值（可省略一个）：
- 第一个值：align-content — 控制垂直方向（块轴）的对齐
- 第二个值：justify-content — 控制水平方向（内联轴）的对齐
常见取值包括：start, end, center, stretch, space-between, space-around, space-evenly。
立即学习“前端免费学习笔记（深入）”；
快速实现居中布局
最典型的使用场景是让整个网格内容在容器中完美居中。
只需一行代码：
.container {
display: grid;
place-content: center;
}
这等同于：
align-content: center; justify-content: center;
无论网格项多少或大小如何变化，整体都会居中显示，非常适合模态框、登录页或空状态页面布局。
灵活处理不规则网格
当网格项数量不确定或响应式变化时，place-content 能动态调整间距与位置。
例如，希望网格项目横向分散、纵向留白均匀：
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
place-content: space-between start;
}
这样所有行会从顶部开始排列，并在垂直方向上均匀分布空白，视觉更整洁。
配合自动填充实现自适应布局
结合
repeat(auto-fill, ...)或
auto-fit，可以创建响应式卡片布局，再用 place-content 控制整体对齐。
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
place-content: start center;
}
在小屏幕上，即使只有一列，内容也会水平居中；大屏幕上多列铺开后，整体依然保持协调美观。
基本上就这些。合理使用 place-content，不仅能减少代码量，还能让 Grid 布局更具弹性与一致性。掌握它，是写出干净现代布局的关键一步。
