align-items 控制网格项在单元格内的垂直对齐，如 center 居中、stretch 拉伸；align-content 管理多行轨道间的整体分布，如 space-between 两端对齐、center 居中排列；两者结合可实现精确布局控制。
在使用 CSS Grid 布局时，子元素的对齐方式是布局控制的关键部分。通过 align-items 和 align-content 属性，可以精确控制网格容器中行内和行间的对齐行为。下面结合实际案例说明它们的作用与用法。
align-items：控制网格项在单元格内的垂直对齐
align-items 作用于单个网格区域内的项目，决定它们在交叉轴（通常是垂直方向）上的对齐方式。
常见取值包括：
- start：顶部对齐
- end：底部对齐
- center：居中对齐
- stretch：拉伸填满（默认值）
实践示例：
假设有一个两行两列的网格容器，每个子元素高度不固定：
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 100px 100px;
align-items: center; /* 所有子项垂直居中 */
height: 300px;
}
<p>.grid-item {
background: lightblue;
}</p>此时所有 .grid-item 都会在各自单元格内垂直居中。若将 align-items 改为 start，则全部靠上；改为 stretch 则自动拉伸占满整个单元格高度。
align-content：控制网格轨道之间的整体对齐
align-content 用于当网格总高度小于容器高度时，控制这些“行轨道”在容器中的分布方式。
它只在存在多余空间或显式定义了多条轨道时才生效。
常用值包括：
- start：轨道组靠上排列
- end：靠下
- center：整体居中
- space-between：两端对齐，中间间距相等
- space-around：每行周围分配均匀空间
实践示例：
设置一个高 400px 的容器，但网格轨道总共只有 200px 高：
.grid-container {
display: grid;
grid-template-columns: repeat(2, 100px);
grid-template-rows: 100px 100px;
height: 400px;
align-content: space-between; /* 轨道之间平均分配空白 */
}
这时两个行轨道会分别位于顶部和底部，中间留出 200px 的空隙并均分给两者之间。如果换成 center，整个网格块会在容器中垂直居中。
组合使用场景：创建弹性卡片布局
设计一个响应式卡片展示区，希望每张卡片内容垂直居中，且当屏幕拉高时整体网格居中显示：
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-template-rows: 80px;
gap: 10px;
height: 500px;
align-items: center; /* 卡片内容在其格子内垂直居中 */
align-content: center; /* 多余空间上下均分，网格整体居中 */
background: #f0f0f0;
}
这样即使窗口变高，卡片区域不会贴顶，而是整体居中，同时每个卡片内部文字也居中对齐，视觉更协调。
基本上就这些。理解 align-items 是“单元格内对齐”，而 align-content 是“轨道间对齐”，就能灵活应对大多数布局需求。不复杂但容易忽略细节。
