填充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;
}解釋：
以上是如何讓 CSS 網格中的最後一行跨越整行？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
