如何在 CSS 網格佈局中選擇性地設定特定行和列的樣式？

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中文網其他相關文章！