在CSS Grid中如何将元素垂直居中对齐到最后一行？

Question

我正在使用CSS网格布局一些项目，像这样...

#container {
  display: grid;
  grid-template-columns: 16.666% 16.666% 16.666% 16.666% 16.666% 16.666%;
}

.item {
  background: teal;
  color: white;
  padding: 20px;
  margin: 10px;
}

<div id="container">
  <div class="item">项目</div>
  <div class="item">项目</div>
  <div class="item">项目</div>
  <div class="item">项目</div>
  <div class="item">项目</div>
  <div class="item">项目</div>
  <div class="item">项目</div>
  <div class="item">项目</div>
  <div class="item">项目</div>
  <div class="item">项目</div>
  <div class="item">项目</div>
  <div class="item">项目</div>
  <div class="item">项目</div>
  <div class="item">项目</div>
  <div class="item">项目</div>
  <div class="item">项目</div>
</div>

如何使最后一行居中而不是左对齐？我不能保证项目的数量，所以希望布局适用于任意数量的项目。

这是我应该使用flexbox吗？还是CSS网格适合使用？

Answer 1

在这篇文章中发现了一个很棒的关于如何使用伪选择器控制剩余网格项的方法：Control Leftover Grid Items with Pseudo-selectors

.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 20px;
  margin: 20px;
  padding: 20px;  
}
.item {
  grid-column: span 2;
  background: #AB47BC;
  padding: 20px;
}

/* 处理两个孤立项 */

.item:last-child:nth-child(3n - 1) {
  grid-column-end: -2;
}

.item:nth-last-child(2):nth-child(3n + 1) {
  grid-column-end: 4;
}

/* 处理单个孤立项 */

.item:last-child:nth-child(3n - 2) {
  grid-column-end: 5;
}

<div class="wrapper">
    <div class="grid grid--1">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>

    <div class="grid grid--2">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

Answer 2

CSS Grid不适合在整行上进行对齐，因为交叉轨道会阻挡道路。这里有一个详细的解释：

• 将网格项对齐到整行/列（类似于flex项）

作为替代方案，使用flexbox并设置justify-content: center。

这将把所有项打包在行的水平中心。然后，您的边距将把它们分开。

在完全填充的行上，justify-content将不起作用，因为没有空闲空间可供其工作。

在具有空闲空间的行上（在您的情况下，仅为最后一行），项目将居中显示。

#container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.item {
  flex: 0 0 calc(16.66% - 20px);
  background: teal;
  color: white;
  padding: 20px;
  margin: 10px;
}

* {
  box-sizing: border-box;
}

<div id="container">
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
</div>