如何均勻分佈 CSS 網格最後一行中的項目？

CSS 網格：均勻分佈最後一行項目

在我們的網頁設計工作中，經常需要在網格內均勻分佈項目佈局，尤其是最後一行。透過結合第 n 個子級和第 n 個最後類型規則，可以輕鬆完成此任務。但是，此方法的先決條件是了解網格中的列數。

考慮以下標記：

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

以及這些隨附的CSS 規則：

.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;
}

在此範例中，網格定義為三列，我們使用nth-child 和指定最後一行中項目的分佈和樣式第n 個最後類型。添加邊框是為了演示視覺效果。

應用於nth-child(3n-1):nth-last-of-type(1) 或nth-child(3n-2) 的css 規則： nth-last-of-type(1)確保第二列和第三列中的最後一項將分別跨越兩列或三列，並在美觀上消耗行中的剩餘空間。

以上是如何均勻分佈 CSS 網格最後一行中的項目？的詳細內容。更多資訊請關注PHP中文網其他相關文章！