CSS 居中网格元素中的左对齐最后一行

在本文中，我们将介绍如何使用CSS在一个居中的网格布局中左对齐最后一行的元素。

阅读更多：CSS 教程

居中网格布局

通常情况下，我们希望在网页中制作一个居中对齐的网格布局。这种布局使得网页看起来更加整洁和美观。我们可以通过使用CSS的flexbox或者grid布局来实现居中网格布局。

在这里，我们将使用grid布局来创建一个示例网格，并在最后一行的元素左对齐。

首先，我们需要在HTML中创建一个容器元素，并将其样式设置为网格布局。我们可以使用以下CSS代码来完成这个任务：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  justify-content: center;
  align-items: center;
}

在这个示例中，我们创建了一个三列的网格布局，并在每个网格之间设置了10像素的间距。使用justify-content: center和align-items: center属性可以将网格元素在容器的水平和垂直方向上居中对齐。

接下来，我们将向容器中添加一些网格元素。这些元素将自动布局在网格中，并按照我们设置的列数进行排列。

<div class="container">
  <div>元素1</div>
  <div>元素2</div>
  <div>元素3</div>
  <div>元素4</div>
  <div>元素5</div>
  <div>元素6</div>
  <div>元素7</div>
  <div>元素8</div>
  <div>元素9</div>
</div>

现在，我们的网格布局已经完成。但是，最后一行的元素目前是居中对齐的。接下来，我们将介绍如何将最后一行的元素左对齐。

左对齐最后一行元素

要将最后一行的元素左对齐，我们可以利用CSS选择器的特性来选择最后一行的元素。然后，通过为选中的元素添加一个额外的CSS样式来实现左对齐。

首先，我们需要通过使用:last-child伪类选择器来选择最后一行的元素。这个伪类选择器适用于任何父级元素中的最后一个子元素。在我们的例子中，每一行的元素都是在一个网格元素中，我们可以使用nth-child(3n)选择器来选择每一行的最后一个元素。在这个选择器中，n表示元素的索引值。

接下来，我们通过添加一个CSS类来给选中的最后一行的元素添加额外的样式。这个样式可以将这些元素从居中对齐变为左对齐。我们可以使用以下CSS代码来实现这个效果：

.container div:nth-child(3n) {
  justify-self: start;
}

在这个样式中，我们使用justify-self: start属性将选中的元素的水平对齐方式设置为左对齐。这样，最后一行的元素就能够左对齐了。

现在，我们已经成功地将最后一行的元素左对齐了。我们来看一下完整的代码示例：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  justify-content: center;
  align-items: center;
}

.container div:nth-child(3n) {
  justify-self: start;
}

<div class="container">
  <div>元素1</div>
  <div>元素2</div>
  <div>元素3</div>
  <div>元素4</div>
  <div>元素5</div>
  <div>元素6</div>
  <div>元素7</div>
  <div>元素8</div>
  <div>元素9</div>
</div>