CSS Grid 对齐

Begindev 编辑部 March 25, 2026

justify-items、align-items 和 place-items 是 CSS Grid 属性，用于控制网格项目（Grid Items）在其网格区域（Grid Areas）内的对齐方式。

它们定义了内容如何在每个网格单元内沿行轴（inline axis，通常是水平）和块轴（block axis，通常是垂直）定位，从而提供了对单个项目放置的精确控制。

本章节将深入研究每个属性，提供详细的解释、示例和实际应用，帮助你掌握这些重要的网格布局工具。

1. 理解 `justify-items`

justify-items 属性为网格容器内的所有网格项目定义了默认的 justify-self 值。

简单来说，它控制网格项目在其各自的网格区域内如何水平对齐（沿行轴）。你可以把它想象成给网格容器的所有子元素设定一个通用的水平对齐规则。如果需要，你可以在单个网格项目上使用 justify-self 属性来覆盖这个规则。

1.1 `justify-items` 的可选值

stretch (默认值): 拉伸网格项目以填满其网格区域的整个宽度。如果网格项目指定的宽度小于网格区域，它将扩展以适应。
start: 将网格项目沿行轴对齐到其网格区域的起始位置。在从左到右的语言中，这意味着对齐到左边缘。
end: 将网格项目沿行轴对齐到其网格区域的结束位置。在从左到右的语言中，这意味着对齐到右边缘。
center: 将网格项目沿行轴在其网格区域内居中。

1.2 `justify-items` 示例

让我们为网格考虑一个简单的 HTML 结构：

<div class="grid-container">
  <div class="grid-item">项目 1</div>
  <div class="grid-item">项目 2</div>
  <div class="grid-item">项目 3</div>
  <div class="grid-item">项目 4</div>
</div>

现在，让我们探索 justify-items 如何影响这些项目的对齐。

1.2.1 示例 1: `justify-items: stretch`

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 150px); /* 两列，每列 150px 宽 */
  grid-template-rows: repeat(2, 100px); /* 两行，每行 100px 高 */
  justify-items: stretch;
  border: 2px solid black; /* 为了便于观察 */
}
.grid-item {
  border: 1px solid red; /* 为了便于观察 */
}

在这个例子中，网格项目将拉伸以填满其各自网格区域的整个宽度。如果项目内的文本内容小于 150px，项目的宽度仍将扩展到 150px。

1.2.1 示例 2: `justify-items: start`

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 150px);
  grid-template-rows: repeat(2, 100px);
  justify-items: start;
  border: 2px solid black;
}
.grid-item {
  border: 1px solid red;
  width: auto; /* 确保项目默认不拉伸 */
}

这里，网格项目将对齐到其网格区域的左边缘。由于 width 设置为 auto，项目只占据其内容所需的宽度，并向起始位置对齐。

1.2.3 示例 3: `justify-items: end`

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 150px);
  grid-template-rows: repeat(2, 100px);
  justify-items: end;
  border: 2px solid black;
}
.grid-item {
  border: 1px solid red;
  width: auto;
}

在这种情况下，网格项目将对齐到其网格区域的右边缘。它们将“紧贴”其网格单元的右侧。

1.2.4 示例 4: `justify-items: center`

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 150px);
  grid-template-rows: repeat(2, 100px);
  justify-items: center;
  border: 2px solid black;
}
.grid-item {
  border: 1px solid red;
  width: auto;
}

使用 justify-items: center，网格项目将在其网格区域内水平居中。项目左右两侧将留有相等的空间。

2. 理解 `align-items`

align-items 属性类似于 justify-items，但它控制网格项目在其网格区域内的垂直对齐（沿块轴）。它为所有网格项目设置了默认的 align-self 值。

2.1 `align-items` 的可选值

stretch (默认值): 拉伸网格项目以填满其网格区域的整个高度。
start: 将网格项目对齐到其网格区域的顶部。
end: 将网格项目对齐到其网格区域的底部。
center: 将网格项目在其网格区域内垂直居中。

2.2 `align-items` 示例

让我们复用之前的 HTML 结构，重点关注 align-items 属性。

2.2.1 示例 1: `align-items: stretch`

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 150px);
  grid-template-rows: repeat(2, 100px);
  align-items: stretch;
  border: 2px solid black;
}
.grid-item {
  border: 1px solid red;
}

这里，网格项目将拉伸以填满其网格区域的整个高度。

2.2.2 示例 2: `align-items: start`

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 150px);
  grid-template-rows: repeat(2, 100px);
  align-items: start;
  border: 2px solid black;
}
.grid-item {
  border: 1px solid red;
  height: auto; /* 确保项目默认不拉伸 */
}

网格项目将对齐到其网格区域的顶部。

2.2.3 示例 3: `align-items: end`

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 150px);
  grid-template-rows: repeat(2, 100px);
  align-items: end;
  border: 2px solid black;
}
.grid-item {
  border: 1px solid red;
  height: auto;
}

网格项目将对齐到其网格区域的底部。

2.2.4 示例 4: `align-items: center`

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 150px);
  grid-template-rows: repeat(2, 100px);
  align-items: center;
  border: 2px solid black;
}
.grid-item {
  border: 1px solid red;
  height: auto;
}

网格项目将在其网格区域内垂直居中。

3. 理解 `place-items`

place-items 是一个简写属性，可以在一个声明中同时设置 align-items 和 justify-items。这简化了语法，使你的 CSS 更简洁。

3.1 `place-items` 的语法

place-items: <align-items> <justify-items>;

第一个值设置垂直对齐 (align-items)。
第二个值设置水平对齐 (justify-items)。
如果只提供一个值，它将同时应用于这两个属性。

3.2 `place-items` 示例

让我们看看如何使用 place-items 来实现与前面示例相同的效果。

3.2.1 示例 1: `place-items: center`

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 150px);
  grid-template-rows: repeat(2, 100px);
  place-items: center; /* 等同于 align-items: center; justify-items: center; */
  border: 2px solid black;
}
.grid-item {
  border: 1px solid red;
  width: auto;
  height: auto;
}

这段代码将使网格项目在其网格区域内水平和垂直双向居中。

3.2.2 示例 2: `place-items: start end`

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 150px);
  grid-template-rows: repeat(2, 100px);
  place-items: start end; /* align-items: start; justify-items: end; */
  border: 2px solid black;
}
.grid-item {
  border: 1px solid red;
  width: auto;
  height: auto;
}

这里，网格项目将对齐到其网格区域的顶部 (start) 和右侧 (end)。

3.2.3 示例 3: `place-items: stretch`

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 150px);
  grid-template-rows: repeat(2, 100px);
  place-items: stretch; /* align-items: stretch; justify-items: stretch; */
  border: 2px solid black;
}
.grid-item {
  border: 1px solid red;
}

在这个例子中，网格项目将拉伸以填满其网格区域的整个高度和宽度。

4. 实际应用与练习

现在，让我们探索一些这些属性非常有用的实际场景。

4.1 练习 1: 内容居中

创建一个三行三列的网格。使用 place-items 将所有项目在其网格区域内居中。

<div class="grid-container">
  <div class="grid-item">项目 1</div>
  <div class="grid-item">项目 2</div>
  <div class="grid-item">项目 3</div>
  <div class="grid-item">项目 4</div>
  <div class="grid-item">项目 5</div>
  <div class="grid-item">项目 6</div>
  <div class="grid-item">项目 7</div>
  <div class="grid-item">项目 8</div>
  <div class="grid-item">项目 9</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  place-items: center;
  border: 2px solid black;
}
.grid-item {
  border: 1px solid red;
  width: auto;
  height: auto;
}

4.2 练习 2: 对齐导航栏中的项目

想象你正在构建一个导航栏，左边是 Logo，右边是导航链接。使用 CSS Grid 和 place-items 来实现此布局。

<div class="nav-grid">
    <div class="logo">Logo</div>
    <div class="nav-links">
        <a href="#">首页</a>
        <a href="#">关于我们</a>
        <a href="#">服务</a>
        <a href="#">联系方式</a>
    </div>
</div>

.nav-grid {
    display: grid;
    grid-template-columns: 1fr 2fr; /* Logo 占 1/3, 链接占 2/3 */
    align-items: center; /* 垂直对齐项目 */
}
.logo {
    justify-self: start; /* 将 Logo 对齐到左侧 */
    padding-left: 20px;
}
.nav-links {
    justify-self: end; /* 将链接对齐到右侧 */
    padding-right: 20px;
}
.nav-links a {
    margin-left: 15px;
    text-decoration: none;
    color: black;
}

在这个练习中，我们在网格容器上使用 align-items: center 来垂直居中 Logo 和导航链接。我们在单个项目上使用 justify-self 将 Logo 定位到起始位置，将导航链接定位到结束位置。justify-self 属性覆盖了 justify-items 对单个网格项目的影响。

4.3 练习 3: 创建卡片布局

使用 Grid 和 place-items 属性设计一个卡片布局，包含标题、一段文本和一个按钮。标题应在顶部，文本在中间，按钮在卡片底部。

<div class="card">
    <h3>卡片标题</h3>
    <p>卡片的一些示例文本。这将填充卡片的中间部分。</p>
    <button>阅读更多</button>
</div>

.card {
    display: grid;
    grid-template-rows: auto 1fr auto; /* 根据需要调整行高 */
    height: 300px; /* 为卡片定义固定高度 */
    width: 200px;
    border: 1px solid #ccc;
    padding: 10px;
    place-items: stretch; /* 水平对齐默认为 stretch */
}
.card h3 {
    text-align: center;
}
.card p {
    text-align: center;
}
.card button {
    justify-self: center; /* 水平居中按钮 */
    margin-bottom: 10px;
}

在这个例子中，我们使用 grid-template-rows 将卡片分为三部分。中间行的 1fr 值使其占据剩余空间，将按钮推到底部。按钮上的 justify-self: center 使其水平居中。

5. 总结

在本章节中，我们探索了 CSS Grid 中的 justify-items、align-items 和 place-items 属性。

这些属性控制网格项目在其网格区域内沿行轴（水平）和块轴（垂直）的对齐方式。

justify-items 设置所有网格项目的默认水平对齐。
align-items 设置默认的垂直对齐。
place-items 是同时设置两者的简写。

你还看到了单个项目如何使用 justify-self 和 align-self 覆盖这些对齐方式。

1. 理解 justify-items

1.1 justify-items 的可选值

1.2 justify-items 示例

1.2.1 示例 1: justify-items: stretch

1.2.1 示例 2: justify-items: start

1.2.3 示例 3: justify-items: end

1.2.4 示例 4: justify-items: center

2. 理解 align-items

2.1 align-items 的可选值

2.2 align-items 示例

2.2.1 示例 1: align-items: stretch

2.2.2 示例 2: align-items: start

2.2.3 示例 3: align-items: end

2.2.4 示例 4: align-items: center

3. 理解 place-items

3.1 place-items 的语法

3.2 place-items 示例

3.2.1 示例 1: place-items: center

3.2.2 示例 2: place-items: start end

3.2.3 示例 3: place-items: stretch