掌握align-items和justify-items可精准控制css grid中图文对齐：align-items: center实现垂直居中，justify-items: center控制水平居中；实际布局中常设align-items: center使文字与图片垂直居中，justify-items: start保持文字左对齐；可通过align-self或justify-self单独调整某项目对齐方式，关键在于理解主轴与交叉轴的方向及其受grid-template-columns和grid-auto-flow的影响。
在使用 CSS Grid 布局时，控制图片和文字的对齐方式非常关键，尤其是在构建卡片、导航栏或图文混排布局时。align-items 和 justify-items 是两个核心属性，用于控制网格项（grid items）在其单元格内的对齐行为。
align-items: center — 控制垂直方向对齐
这个属性作用于交叉轴（cross axis），在默认的行排列模式下（grid-auto-flow: row），交叉轴是垂直方向。设置 align-items: center 可以让网格项在单元格内垂直居中。
应用场景示例：- 一个包含图片和标题的卡片，希望文字在高度方向上与图片居中对齐。
- 多个不等高的网格项需要统一垂直居中显示。
代码示例：
.container {
display: grid;
grid-template-columns: 100px 1fr;
align-items: center; /* 所有子元素垂直居中 */
}
.image {
grid-column: 1;
}
.text {
grid-column: 2;
}
此时，图片和文字会在整个行高范围内垂直居中对齐。
立即学习“前端免费学习笔记（深入）”；
justify-items: center — 控制水平方向对齐
这个属性作用于主轴（main axis）的反方向——即在默认列布局下控制网格项在其列内的水平对齐方式。设置 justify-items: center 会让所有网格项在其网格区域中水平居中。
适用情况：- 希望多个文本块或图片在各自的列中居中显示。
- 创建对称或中心对称的布局结构。
注意： 如果容器是按行划分的网格（常见情况），justify-items 影响的是每个项目在其列宽度中的水平对齐。
图文对齐实战技巧
在实际开发中，通常希望图片靠左，文字左对齐但垂直居中。这时可以这样设置：
.grid-layout {
display: grid;
grid-template-columns: 80px 1fr;
align-items: center; /* 垂直居中 */
justify-items: start; /* 水平左对齐，避免文字居中 */
gap: 12px;
}
如果只想让某个特定项目单独对齐，可以用 align-self 或 justify-self 覆盖全局设置：
.text {
align-self: start; /* 文字顶部对齐 */
}
基本上就这些。掌握 align-items 和 justify-items 的区别，就能灵活控制网格中图片与文字的位置关系。关键是理解主轴与交叉轴的方向，以及它们如何受 grid-template-columns 和 grid-auto-flow 的影响。
