要设置任意行的样式，可以使用将display设置为contents的 Package 器元素。请参阅下面的代码片段：

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

**编辑：**与所有实现一样，您应该检查以确保它在您的目标环境中工作。您可以查看MDN或www.example.com上的兼容性表caniuse.com，了解对display: contents的支持：

• https://developer.mozilla.org/en-US/docs/Web/CSS/display#Browser_compatibility
• https://caniuse.com/#search=display%3A%20contents

没有列或行元素可以作为目标，但如果网格是统一的（每行中的单元格数量相同），则可以选择单元格。以下是一些示例。

1.色谱柱

5列网格中的最后一列：

.item:nth-child(5n) { /* ... */ }

5列网格中的第四列（倒数第二列）：

.item:nth-child(5n-1) { /* ... */ }

五列网格中的第一列（倒数第五列）：

.item:nth-child(5n-4) { /* ... */ }

2.行

五列网格中的第一行（前五个单元格）：

.item:nth-child(-n+5) { /* ... */ }

5列网格中的第二行（单元格6到10）：

.item:nth-child(n+6):nth-child(-n+10) { /* ... */ }

5列网格中的第三行（单元格11到15）：

.item:nth-child(n+11):nth-child(-n+15) { /* ... */ }

具有20个单元格的5列网格中的最后一行（从16开始的单元格）：

.item:nth-child(n+16) { /* ... */ }

不适用于CSS。
CSS的目标是HTML元素、属性和属性值。
网格列和行没有这些“挂钩”。
你必须直接瞄准网格项目。

• 你写道 *

例如，假设我有一个3行2列的CSS网格布局：grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr; .如何选择第2列中的所有元素？

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 10px;
  padding: 10px;
  height: 50vh;
  background-color: gray;
}

grid-item {
  background-color: lightgreen;
}

grid-item:nth-child(2n) {
  border: 2px dashed red;
}

<grid-container>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
</grid-container>

不能，因为没有这样的选择器。
但这很奇怪，因为您可以很容易地从CSS定位行/列：

#item3 {
  background-color: blue;
  grid-row: span 2 / 7;
}

因此，很自然地会出现这样的情况：

div[style*="display:grid"]:grid-row(3) {
    background-color: blue;
}

div[style*="display:grid"]:grid-column(3) {
    background-color: green;
}

我不知道为什么还没有提出这方面的草案。

更新1

CSSWG起草了色谱柱选择草案

更新2

在W3C存储库中也有一个问题请求

如果你想给一行设置样式，同样的原则也适用。以上面的例子为例：

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-gap: 10px;
  padding: 10px;
  height: 50vh;
  background-color: gray;
}

grid-item {
  background-color: lightgreen;
}

grid-item:nth-child(4n+3),grid-item:nth-child(4n) {
  border: 2px dashed red;
}

<grid-container>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
</grid-container>

在不久的将来，我们将能够做到这一点感谢网格结构选择器
二维网格中单元格的双重关联（与其行和列）不能用层次标记语言中的父代表示。只能以层次方式表示其中一种关联：另一种必须在文档语言语义中显式或隐式定义，在HTML和DocBook这两种最常见的层次化标记语言中，标记是以行为主的（即，行关联是以层次化方式表示的）;列必须是隐式的。若要能够表示此类隐式的基于列的关系，请使用列组合符和：定义了nth-col()和:nth-last-col()伪类。在列主格式中，这些伪类将根据行关联进行匹配。
这里需要的是:nth-col()，其行为方式与:nth-child()相同
:nth-col(An+B)伪类表示法表示属于列的单元格元素，该列在其ref之前具有An+B-1列