CSS 如何使最后一行的项目在CSS Grid中占用剩余空间

在本文中，我们将介绍如何使用CSS Grid来使最后一行的项目占用剩余空间。CSS Grid是一种用于创建网格布局的CSS属性，它可以让我们以自由灵活的方式排列项目。

阅读更多：CSS 教程

什么是CSS Grid？

CSS Grid是CSS中的一个强大属性，它可以创建一个二维网格，用于布局和排列项目。Grid是由行（Row）和列（Column）组成的，可以在网格中定义每个单元格的大小和位置。

如何使用CSS Grid？

要使用CSS Grid，我们需要定义一个包含项目的容器，并为容器应用Grid属性。以下是一个示例：

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

在上面的示例中，我们使用display: grid将容器的显示属性设置为grid，并使用grid-template-columns: repeat(3, 1fr)定义了三列的网格布局。grid-gap: 10px用于在项目之间创建间隔。

让最后一行的项目占用剩余空间

默认情况下，CSS Grid会将项目平均分配到每个单元格中。但是，如果最后一行的项目数量不足以填满整个行，Grid会自动将它们居中对齐。如果我们希望最后一行的项目占用剩余空间，可以使用grid-auto-rows属性来实现。

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
  grid-gap: 10px;
}

在上面的示例中，我们使用grid-auto-rows: 100px将每个项目的行高设置为100px。这样，在最后一行项目不足以填满整个行的情况下，它们将仍然保持100px的高度，并且会占用剩余的空间。

示例

让我们通过一个示例来进一步理解如何使最后一行的项目占用剩余空间。

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

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
  grid-gap: 10px;
}

.item {
  background-color: #000;
  color: #fff;
  padding: 10px;
  text-align: center;
}

在上面的示例中，我们有7个项目并且定义了3列的网格布局。每个项目的行高为100px。由于只有7个项目，最后一行只有一个项目。根据我们设置的属性，最后一行的项目将保持100px的高度，并且占用剩余的空间。