首页 > 文章 > 前端

如何通过css grid调整多行多列元素对齐

时间：2025-10-16 23:36:12 352浏览收藏

文章不知道大家是否熟悉？今天我将给大家介绍《如何通过css grid调整多行多列元素对齐》，这篇文章主要会讲到等等知识点，如果你在看完本篇文章后，有更好的建议或者发现哪里有问题，希望大家都能积极评论指出，谢谢！希望我们能一起加油进步！

使用CSS Grid可通过justify-items、align-items控制项目在单元格内的对齐，justify-content、align-content调整整个网格在容器中的位置，结合justify-self和align-self可单独设置某项目的对齐方式。

使用 CSS Grid 调整多行多列元素的对齐方式，主要依赖于容器上的 justify-items、align-items、justify-content 和 align-content 属性。这些属性分别控制项目在行轴和列轴上的对齐行为。

首先定义一个 grid 容器，并设置行列布局：

1 2 3 4 5 6

上面是一个 3 列 2 行的网格，每个格子之间有间隙。

这两个属性作用于容器，影响所有子项目在单元格内的对齐方式。

常用值包括：start、end、center、stretch

例如让所有项目居中对齐：

.grid-container {
  display: grid;
  justify-items: center;
  align-items: center;
}

这样每个格子内的内容都会在水平和垂直方向居中。

当网格的总大小小于容器时，可以用这两个属性调整整个网格的分布。

常见值：start、end、center、space-between、space-around、space-evenly

比如让网格在容器中水平垂直居中：

.grid-container {
  width: 80vw;
  height: 200px;
  justify-content: center;
  align-content: center;
}

如果只想调整某个格子的内容，可以使用项目自身的 justify-self 和 align-self。

例如让第2个格子的内容右对齐并顶部对齐：

.item-2 {
justify-self: end;
align-self: start;
}

这不会影响其他项目，灵活性更高。

基本上就这些。通过组合使用 justify、align 相关属性，你可以精确控制多行多列布局中每个层级的对齐方式。关键是分清 items 是针对格子内内容，content 是针对整个网格块的位置。不复杂但容易忽略细节。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~

CSS Grid 元素对齐