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

定位CSS 網格中的特定列或行

在CSS 網格佈局中，grid-template-rows 和grid-template -columns屬性分別定義行數和列數。但是，有時我們需要對網格的特定部分進行樣式設定。

定位行

要對任意行進行樣式設置，我們可以使用包裝元素，並將其顯示設置為內容。這允許我們將整行設定為單一實體，即使它包含多個儲存格。

例如，考慮以下程式碼：

.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;
}

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-row-wrapper">
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
    <div class="grid-item">10</div>
  </div>
  <div class="grid-item">11</div>
  <div class="grid-item">12</div>
  <div class="grid-item">13</div>
  <div class="grid-item">14</div>
  <div class="grid-item">15</div>
  <div class="grid-item">16</div>
  <div class="grid-item">17</div>
  <div class="grid-item">18</div>
  <div class="grid-item">19</div>
  <div class="grid-item">20</div>
</div>

在此範例中， .grid-row-wrapper 類別應用於包含第二行網格項目的包裝元素。使用 .grid-row-wrapper > 這些項目的背景顏色設定為天藍色.grid-item 選擇器。

定位列

定位特定欄位有點棘手。 CSS Grid 沒有提供直接選擇列的方法，但我們可以使用其他屬性的組合來達到所需的效果。

一種方法是使用多個網格容器，每個網格容器都有自己的網格模板。這使我們能夠獨立控制每列的​​佈局。

另一種方法是使用 nth-child() 選擇器來定位網格中的特定單元格。然而，這可能很難維護，尤其是在網格動態變化的情況下。

如果您需要定期定位特定的列或行，通常最好使用提供額外選擇器和功能的預處理器或庫。 CSS 網格。

以上是如何在 CSS 網格中選擇性地設定特定行和列的樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！