CSS 網格佈局的目標樣式：行和列
在CSS 網格佈局中，選擇性地針對特定的行或列變得至關重要精確的造型。雖然第 n 個子選擇器可用於傳統的專案選擇，但在定位網格結構中的元素時，它們存在不足。
定位行
要解決這個問題限制，請考慮使用包裝元素，並將其顯示屬性設為內容。此技術可讓您專門為包裝器的子級分配樣式，儘管它們位於網格的軌道內。
例如，下面的程式碼片段示範如何以藍色突出顯示特定行：
.grid-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 2px;
}
.grid-item {
border: 1px solid black;
padding: 5px;
}
.grid-row-wrapper {
display: contents;
}
.grid-row-wrapper > .grid-item {
background: skyblue;
}在此範例中，包裝元素「.grid-row-wrapper」的顯示屬性設定為內容，允許其直接子元素「.grid-item」繼承其藍色背景
定位列
雖然上述技術對行有效，但CSS 網格佈局缺乏直接定位特定列的等效機制。然而，後備解決方案涉及使用 justify-self 或align-self 屬性調整網格內元素的位置，這可能會產生針對特定列的錯覺。
以上是如何在 CSS 網格佈局中選擇性地設定特定行和列的樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
