CSS Grid如何控制元素对齐_align-items与justify-items组合使用

align-items 和 justify-items 分别控制网格项在列轴和行轴的对齐方式，前者处理垂直对齐（如 start、center、end、stretch），后者处理水平对齐，组合使用可实现单元格内精准定位；例如设置两者均为 center 可使所有项目居中显示，而 align-self 与 justify-self 可覆盖单个项目的对齐行为，提升布局灵活性。

CSS Grid 布局中，align-items 和 justify-items 是两个用于控制网格项（grid items）在单元格内对齐方式的关键属性。它们分别处理交叉轴（列方向）和主轴（行方向）的对齐，组合使用可以精确控制元素在网格区域中的位置。

align-items：控制垂直对齐（沿列轴）

该属性作用于网格容器，定义所有网格项在其单元格内的垂直对齐方式。适用于单个网格区域的高度超出内容所需时的对齐控制。

• start：对齐到单元格顶部
• end：对齐到单元格底部
• center：垂直居中
• stretch：拉伸以填满整个单元格（默认值）

justify-items：控制水平对齐（沿行轴）

该属性定义网格项在其单元格内的水平对齐方式。

• start：对齐到单元格左侧
• end：对齐到单元格右侧
• center：水平居中
• stretch：拉伸填满单元格（默认）

组合使用示例

假设有一个 2x2 的网格容器，希望所有子元素在各自单元格中居中显示：

立即学习“前端免费学习笔记（深入）”；

Remove.bg

AI在线抠图软件，图片去除背景

174

查看详情

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100px 100px;
  align-items: center;     /* 垂直居中 */
  justify-items: center;   /* 水平居中 */
}

此时每个网格项都会在其单元格内完全居中。若将 align-items 设为 start，justify-items 设为 end，则所有元素会出现在单元格的右上角。

与 align-self / justify-self 的关系

如果某个网格项需要特殊对齐，可单独设置 align-self 或 justify-self，它们会覆盖容器的 align-items 和 justify-items 设置。

例如：

.grid-item-special {
  justify-self: start; /* 即使容器设为 center，该项仍靠左 */
}

基本上就这些。合理搭配 align-items 与 justify-items，能快速实现网格内部的一致对齐效果，提升布局控制力。不复杂但容易忽略细节。

以上就是CSS Grid如何控制元素对齐_align-items与justify-items组合使用的详细内容，更多请关注php中文网其它相关文章！