如何讓 CSS Grid 的最後一行項目均勻地填滿可用空間？

強制網格最後一行中的項目填充空間

將項目均勻分佈在CSS 網格的最後一行，無論數量多少的項目，請考慮以下方法：

挑戰在於確定網格中的項目數量以操縱其佈局。由於事先可能不知道這一點，CSS 提供了使用 nth-child 和 nth-last-of-type 選擇器的解決方案。它的工作原理如下：

1. 識別最後一行項目：使用 nth-last-of-type 選擇最後一行項目。例如，網格> *:nth-last-of-type(1) 將定位最後一行中的所有項目。
2. 分佈左端項目：要讓最左邊的項目居中，請使用 justify-self: center 。對於第二項，使用 justify-self: end 將其向右對齊。這些樣式可以套用於每三個項目（例如，grid > *:nth-child(3n-1) 和 grid > *:nth-child(3n-2)）。
3. 調整最後一項跨度：對於行中的最後一項，我們希望它們跨越整個剩餘空間。使用grid-column: span 2 或grid-column: span 3 來實現此目的，取決於網格中的列數（例如，對於三列網格，它將是grid > *:nth-child(3n - 1):nth-last-of-type(1) { grid-column: span 2 }).

透過結合這些技術，您可以確保網格最後一行中的所有項目均勻地消耗可用空間，無論其數量如何。

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