在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>