使用place-items:center可实现Grid容器内子元素水平垂直居中；2. 通过repeat()函数结合fr单位可让多个元素均匀分布填充容器。
在现代网页布局中，CSS Grid 是一个强大且灵活的工具，能轻松实现内容居中与等距分布。相比传统方法（如浮动、定位或 Flexbox），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;
}
当需要将多个项目在一行或一列中等距排列时，Grid 的 repeat() 与 .container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px; /* 设置项目之间的间隙 */
padding: 20px;
height: 100vh;
}
结合 ，可以让项目根据容器大小自动换行并保持合理间距。
常用响应式写法：
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
padding: 16px;
}
这段代码含义是：每列最小 200px，最大为 1fr，浏览器会自动判断一行放几个项目。小屏幕下自动变为单列，大屏幕则多列并排，始终保持等分布局。
有时你需要居中一个固定宽度的卡片，同时让它在网格中保持整洁。可以用网格轨道定义中间区域。
.container {
display: grid;
grid-template-columns: 1fr 300px 1fr; /* 中间300px，两边均分剩余空间 */
gap: 10px;
}
<p>.card {
grid-column: 2; /<em> 明确放在第二列 </em>/
}
这种方式适合登录框、模态框等需要精确控制位置的场景，比使用 更具结构性。
基本上就这些。CSS Grid 让布局变得更语义化和可维护，掌握这几个技巧后，大多数居中与等分布局都能简洁实现。不复杂但容易忽略的是 gap 的使用和 fr 单位的弹性分配，合理搭配能让页面更具适应性。
以上就是如何使用CSS Grid实现内容居中与等距分布_布局技巧分享的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
267
收藏
