如何讓 CSS 網格中的最後一行跨越整行？

填充CSS 網格中的最後一行

在CSS 網格中，一個常見的挑戰是確保最後一行中的項目佔據整個網格排。如果不知道項目的確切數量，解決方案可能看起來難以捉摸。

使用nth-child 和nth-last-of-type

這可以透過組合來實現CSS 規則：nth-​​child 和nth-last-of -type。這些規則根據元素在特定父元素中的位置來定位元素。透過這些規則，可以調整最後一行中項目的對齊方式和大小。

範例程式碼：

考慮以下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(3n-1) 和nth-child(3n)基於元素在其中的位置網格容器。這些規則用於設定中間列和右列中的項目的樣式。 nth-child(3n-1):nth-last-of-type(1) 和nth-child(3n-2):nth -last-of-type(1) 專門針對最後一行中的最後一項，並調整其對齊方式和跨度。 grid-column 屬性用於控制最後一行的列跨度項目，確保它們填滿整行。

以上是如何讓 CSS 網格中的最後一行跨越整行？的詳細內容。更多資訊請關注PHP中文網其他相關文章！