如何讓 CSS 網格的最後一行項目填滿剩餘空間？

控制CSS 網格中的最後一行間距

挑戰：

我們如何確保最後一行中的所有項目CSS網格的大小會消耗行中的剩餘空間，無論它們如何

解決方案：

利用CSS 網格的強大功能，我們可以透過nth-child和nth-last-of- 的巧妙組合來實現這種空間控制類型規則。關鍵在於事先知道網格中的列數。

實作：

1. 使用 display: grid 定義網格並指定所需的列數帶有 grid-template-columns 的欄位。
2. 套用 justify-items: start 屬性來對齊中的項目行。
3. 使用 *:nth-child(3n-1) 使用特定屬性設定每行中第一個項目的樣式（例如，使文字居中）。
4. 使用 *:nth-child (3n) 設定每行中第二個項目的樣式（例如，右對齊文字）。
5. 對於每行中的最後一個項目，組合*:nth-child(3n-1) 和 nth-last-of-type(1) 來實現所需的跨越行為。
6. 新增其他規則來自訂最後一行的外觀，例如指定邊框或背景顏色。

範例程式碼：

.grid {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-items: start;
  grid-gap: 10px;
}

.grid div {
  border: 1px solid #ccc;
  width: 100%;
}

.grid > *:nth-child(3n-1) {
  justify-self: center;
  text-align: center;
}

.grid > *:nth-child(3n) {
  justify-self: end;
  text-align: right;
}

.grid > *:nth-child(3n-1):nth-last-of-type(1) {
  border-color: red;
  grid-column: span 2;
}

.grid > *:nth-child(3n-2):nth-last-of-type(1) {
  border-color: red;
  grid-column: span 3;
}

HTML 範例：

<div class="grid">
  <div>text</div>
  <div>TEXT</div>
  <div>text</div>
  <div>text</div>
  <div>TEXT</div>
  <div>text</div>
  <div>text</div>
  <div>TEXT</div>
</div>

HTML 範例

透過利用這些🎜的力量，我們可以有效控制專案的間距CSS網格的最後一行，確保美觀且靈活的佈局。

以上是如何讓 CSS 網格的最後一行項目填滿剩餘空間？的詳細內容。更多資訊請關注PHP中文網其他相關文章！