如何在 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中文网其他相关文章！