多行对齐不一致可通过align-content控制整体分布，如center居中；用align-self调整单个项对齐，如end底部对齐；结合align-items设置默认对齐方式，明确层级关系即可解决。
在使用CSS网格布局时，如果出现多行对齐不一致的问题，通常是因为网格容器中的行高未统一，或者子元素在交叉轴（垂直方向）上的对齐方式没有明确设置。可以通过 align-content 或 align-self 属性来有效控制多行内容的对齐行为。
使用 align-content 统一多行整体对齐
当网格容器中有多个轨道行，并且总高度大于内容总高度时，align-content 决定这些行在容器中的分布方式。
常见取值包括：
- stretch：默认值，拉伸行以填满容器（适用于未设置固定高度的行）
- start：所有行靠顶部对齐
- end：所有行靠底部对齐
- center：居中对齐
- space-between：行之间等间距分布
- space-around：每行周围分配相等空间
例如，让多行网格内容垂直居中：
立即学习“前端免费学习笔记（深入）”；
.grid-container {
display: grid;
grid-template-rows: repeat(3, auto);
height: 300px;
align-content: center; /* 多行整体居中 */
}使用 align-self 控制单个网格项的对齐
若某一行或某个网格项需要单独调整垂直对齐方式，可使用 align-self。
这个属性作用于单个网格项，优先级高于容器的 align-items。
常用值：
- stretch：拉伸以填满整个单元格（默认）
- start：顶部对齐
- end：底部对齐
- center：垂直居中
示例：让某个项目底部对齐
.item-special {
align-self: end;
}结合 align-items 设置默认对齐
如果你希望所有子项默认有统一的垂直对齐方式，先设置容器的 align-items，再用 align-self 覆盖个别项。
.grid-container {
display: grid;
align-items: center; /* 所有子项默认垂直居中 */
}
.item-top {
align-self: start; / 单独调整 /
}
基本上就这些。通过合理使用 align-content 控制多行分布，配合 align-self 微调个别元素，就能解决多行对齐不一致的问题。关键是理解容器与子项之间的对齐层级关系。不复杂但容易忽略细节。
