使用CSS Grid的align-content实现多行对齐，需设置固定高度容器并启用多行布局。1. 定义display: grid、grid-auto-rows和固定height，确保内容换行；2. 应用align-content控制多行在交叉轴的分布：start（顶部）、end（底部）、center（居中）、space-between（首尾贴边）、space-around（周围等距）、space-evenly（完全等距）；3. 适用于卡片网格等场景，当项目不足或超出时保持整齐垂直排布。
使用 CSS Grid 和 align-content 实现多行对齐，关键在于容器设置了多行网格布局，并且整体内容高度超出容器时，通过 align-content 控制这些行在交叉轴（通常是垂直方向）上的分布方式。
1. 基础 Grid 容器设置
要启用多行对齐，先定义一个 grid 容器，并允许项目换行。使用 grid-auto-rows 设置每行高度，用 grid-auto-flow: row（默认）让项目按行排列。
.container { display: grid; grid-template-columns: repeat(3, 1fr); /* 三列 */ grid-auto-rows: 100px; /* 每行高度固定 */ grid-auto-flow: row; height: 400px; /* 容器高度固定，才能看到 align-content 效果 */ align-content: center; /* 控制多行整体对齐方式 */}
注意：align-content 只在 grid 容器有**多余空间**且**有多行内容**时才起作用。如果只有一行或容器高度自适应（如 height: auto），这个属性不会生效。
2. align-content 的常用取值与效果
以下是常用的 align-content 值及其表现：
立即学习“前端免费学习笔记（深入）”；
稿定抠图
AI自动消除图片背景
76 查看详情 start：多行向容器顶部对齐end：多行向底部对齐center：多行整体居中对齐space-between：行之间均匀分布，首行贴顶，末行贴底space-around：每行周围分配均匀空间space-evenly：所有行间距及边缘间距完全相等
/* 示例：多行居中 */.container { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 80px; height: 300px; align-content: center;}
3. 实际应用场景
比如做一个卡片网格，卡片数量不固定，希望在容器中垂直居中排列多行：
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); grid-auto-rows: 100px; gap: 10px; height: 500px; align-content: center; /* 多余的垂直空间均匀分布在上下 */ padding: 20px; box-sizing: border-box;}
当卡片超过一行时，整个行块会垂直居中；若不足填满容器，也能保持整齐对齐。
基本上就这些。关键是设置固定高度容器、允许多行生成、再用 align-content 调整行的整体排布。
以上就是如何用css grid与align-content实现多行对齐的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1022962.html
微信扫一扫 
支付宝扫一扫 
