使用place-items:center可实现Grid容器内子元素水平垂直居中；2. 通过repeat()函数结合fr单位可让多个元素均匀分布填充容器。
在现代网页布局中，CSS Grid 是一个强大且灵活的工具，能轻松实现内容居中与等距分布。相比传统方法（如浮动、定位或 Flexbox），Grid 提供了更直观的二维布局控制能力。下面分享几种实用技巧，帮助你快速掌握这些常见布局需求。
1. 使用 Grid 实现内容完全居中
要让一个子元素在容器中水平垂直都居中，可以利用 place-items 简写属性，或者分别设置对齐方式。
示例代码：
.container {
display: grid;
place-items: center; /* 水平垂直居中 */
height: 100vh;
}
<p>.item {
/<em> 子元素无需额外样式 </em>/
}
如果只想针对单个项目居中，也可以使用 justify-self 和 align-self：
立即学习“前端免费学习笔记（深入）”；
.item {
justify-self: center;
align-self: center;
}
2. 多个元素等距分布（均匀填充容器）
当需要将多个项目在一行或一列中等距排列时，Grid 的 repeat() 与 gap 确保它们之间有统一间距，无需计算 margin。
3. 响应式等分布局（适配不同屏幕）
结合 ，可以让项目根据容器大小自动换行并保持合理间距。
常用响应式写法：
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
padding: 16px;
}
这段代码含义是：每列最小 200px，最大为 1fr，浏览器会自动判断一行放几个项目。小屏幕下自动变为单列，大屏幕则多列并排，始终保持等分布局。
4. 居中固定尺寸元素并周围留白
有时你需要居中一个固定宽度的卡片，同时让它在网格中保持整洁。可以用网格轨道定义中间区域。
.container {
display: grid;
grid-template-columns: 1fr 300px 1fr; /* 中间300px，两边均分剩余空间 */
gap: 10px;
}
<p>.card {
grid-column: 2; /<em> 明确放在第二列 </em>/
}
这种方式适合登录框、模态框等需要精确控制位置的场景，比使用 更具结构性。
基本上就这些。CSS Grid 让布局变得更语义化和可维护，掌握这几个技巧后，大多数居中与等分布局都能简洁实现。不复杂但容易忽略的是 gap 的使用和 fr 单位的弹性分配，合理搭配能让页面更具适应性。
