使用CSS Grid可通过justify-items、align-items控制项目在单元格内的对齐，justify-content、align-content调整整个网格在容器中的位置，结合justify-self和align-self可单独设置某项目的对齐方式。
使用 CSS Grid 调整多行多列元素的对齐方式，主要依赖于容器上的 justify-items、align-items、justify-content 和 align-content 属性。这些属性分别控制项目在行轴和列轴上的对齐行为。
1. 设置网格容器的基本结构
首先定义一个 grid 容器，并设置行列布局：
1 2 3 4 5 6
上面是一个 3 列 2 行的网格，每个格子之间有间隙。
2. 控制单个项目的对齐（justify-items 与 align-items）
这两个属性作用于容器，影响所有子项目在单元格内的对齐方式。
立即学习“前端免费学习笔记（深入）”；
justify-items：控制项目在单元格内沿行轴（横向）的对齐 align-items：控制项目在单元格内沿列轴（纵向）的对齐
常用值包括：
start
、
end
、
center
、
stretch
例如让所有项目居中对齐：
.grid-container {
display: grid;
justify-items: center;
align-items: center;
}
这样每个格子内的内容都会在水平和垂直方向居中。
Seede AI
AI 驱动的设计工具
586 查看详情
3. 控制整体网格在容器中的位置（justify-content 与 align-content）
当网格的总大小小于容器时，可以用这两个属性调整整个网格的分布。
justify-content：控制网格整体在行轴上的对齐（列之间的空间分配） align-content：控制网格整体在列轴上的对齐（行之间的空间分配）
常见值：
start
、
end
、
center
、
space-between
、
space-around
、
space-evenly
比如让网格在容器中水平垂直居中：
.grid-container {
width: 80vw;
height: 200px;
justify-content: center;
align-content: center;
}
4. 单独调整某个项目的位置
如果只想调整某个格子的内容，可以使用项目自身的 justify-self 和 align-self。
例如让第2个格子的内容右对齐并顶部对齐：
.item-2 {
justify-self: end;
align-self: start;
}
这不会影响其他项目，灵活性更高。
基本上就这些。通过组合使用 justify、align 相关属性，你可以精确控制多行多列布局中每个层级的对齐方式。关键是分清 items 是针对格子内内容，content 是针对整个网格块的位置。不复杂但容易忽略细节。
以上就是如何通过css grid调整多行多列元素对齐的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1063673.html
微信扫一扫 
支付宝扫一扫 
