居中靠 place-items，留白靠容器 padding；需在 grid 容器上设 padding 和 box-sizing: border-box，并为子元素设 min-width 防收缩，二者缺一不可。
grid 容器里内容居中但留白，别只靠 place-items
place-items: center 确实能把子元素在 grid 区域里水平垂直居中，但它对齐的是整个 grid 区域（即 grid-template-areas 或隐式轨道定义的范围），不是容器内边距内的可视区域。如果你发现内容“贴着容器边缘”，大概率是 grid 容器本身没设 padding，或者子元素没脱离默认的轨道边界挤压。
给 grid 容器加 padding 是最直接的解法
只要容器有内边距，place-items: center 就会把子项居中到这个「带 padding 的内容区」里，自然就离边有了距离。
-
padding必须加在 grid 容器上，不是子元素上 - 用
padding而非margin，因为 margin 不影响 grid 的对齐参考系 - 如果用了
box-sizing: border-box（推荐），padding 会包含在宽高内，更可控
.grid-container {
display: grid;
place-items: center;
padding: 2rem; /* 内容自动离边 2rem */
box-sizing: border-box;
}当子元素是单个 div 且需自适应尺寸时，注意 min-width/min-height
如果 grid 容器设置了 place-items: center，但子元素本身没有显式尺寸或最小尺寸，它可能被压缩成“刚好包住内容”，导致视觉上仍像贴边——尤其在文字少、图片未加载时。
- 加
min-width: max-content或具体值（如min-width: 300px）防止过度收缩 - 若子元素是弹性块（如卡片），建议同时设
max-width配合width: fit-content - 避免依赖
width: 100%，它会让子项撑满轨道，抵消 padding 的留白效果
不用 place-items 也能实现？可以，但更啰嗦
有人想用 justify-items + align-items 分开写，或改用 justify-content/align-content，但要注意：
立即学习“前端免费学习笔记（深入）”；
-
justify-content和align-content只对**多行轨道**起作用（比如设置了grid-template-rows: repeat(3, 1fr)且内容跨多行），单个子项不触发 -
justify-items控制的是**所有子项在单元格内的对齐**，不是整个容器的居中 - 真正等价于
place-items: center的写法是：justify-items: center; align-items: center，但它依然不解决 padding 缺失的问题
所以，核心还是：居中靠 place-items，留白靠容器 padding。两者缺一不可，且作用对象不能错。
