使用place-items:center可实现Grid容器内子元素水平垂直居中；2. 通过repeat()函数结合fr单位可让多个元素均匀分布填充容器。

在现代网页布局中，CSS Grid 是一个强大且灵活的工具，能轻松实现内容居中与等距分布。相比传统方法（如浮动、定位或 Flexbox），Grid 提供了更直观的二维布局控制能力。下面分享几种实用技巧，帮助你快速掌握这些常见布局需求。

1. 使用 Grid 实现内容完全居中

要让一个子元素在容器中水平垂直都居中，可以利用 place-items 简写属性，或者分别设置对齐方式。

示例代码：

.container {
  display: grid;
  place-items: center; /* 水平垂直居中 */
  height: 100vh;
}
.item {
/ 子元素无需额外样式 /
}

如果只想针对单个项目居中，也可以使用 justify-self 和 align-self：

.item {
  justify-self: center;
  align-self: center;
}

2. 多个元素等距分布（均匀填充容器）

当需要将多个项目在一行或一列中等距排列时，Grid 的 repeat() 与 repeat(3, 1fr); gap: 20px; /* 设置项目之间的间隙 */ padding: 20px; height: 100vh; }

这样每个列宽度自动均分可用空间， 与 更具结构性。