如何在CSS网格布局中定位特定的列或行？

Question

是否可以使用CSS选择特定的网格列或行？

例如,假设我有一个3行×2列CSS网格布局:grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr;.如何从第2列中选择所有元素？例如:( grid:nth-child(column:2)只是我的想法,不是有效的代码).

我已经nth-child在div元素上尝试了选择器,但这不允许我在Grid Layout引擎自动放置项目时指定行或列.

body {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}

.item {
  background: #999;
}

<div class="item">
  <p>Customer Name</p>
  <p>Element 1 | Element 2</p>
</div>

<div class="item">
  <p>Right Justify</p>
  <p>Element 1 | Element 2</p>
</div>

<div class="item">
  <p>Customer Name</p>
  <p>Element 1 | Element 2</p>
</div>

<div class="item">
  <p>Customer Name</p>
  <p>Element 1 | Element 2</p>
</div>
<div class="item">
  <p>Customer Name</p>
  <p>Element 1 | Element 2</p>
</div>
<div class="item">
  <p>Customer Name</p>
  <p>Element 1 | Element 2</p>
</div>
<div class="item">
  <p>Customer Name</p>
  <p>Element 1 | Element 2</p>
</div>

Answer 1

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>

Answer 2

要设置任意行的样式,可以使用display设置为的包装元素contents.请参阅下面的代码段:

.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或caniuse.com上查看兼容性表,以获得以下支持display: contents:

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

Answer 3

你不能，因为没有这样的选择器。

但这很奇怪，因为您可以轻松地从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;
}

我不知道为什么至今还没有提出草案。

有一个用于列选择的 CSSWG 草案

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

Answer 4

在不久的将来，借助网格结构选择器，我们将能够做到这一点

二维网格中的单元格（与其行和列）的双重关联不能用分层标记语言中的起源来表示。这些关联中只有一个可以分层表示：另一个必须在文档语言语义中显式或隐式定义。在 HTML 和 DocBook 这两种最常见的分层标记语言中，标记都是行主的（即，行关联是分层表示的）；列必须是隐含的。为了能够表示这种隐含的基于列的关系，定义了列组合器以及 :nth-col()和:nth-last-col()伪类。在列主格式中，这些伪类改为与行关联匹配。

您在这里需要的:nth-col()行为方式与:nth-child()

伪:nth-col(An+B)类表示法表示属于列的单元格元素，该列在^引用An+B-1之前有列

Answer 5

如果您想设置行样式，则适用相同的原则。以上面的例子为例：

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>

Answer 6

没有可以定位的列或行元素，但是如果网格是统一的（每行中的单元格数目相同），则可以选择单元格。这里有些例子。

1.列。

5列网格中的最后一列：

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

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

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

5列网格中的第一列（最后第五列）：

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

2.行

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

    .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) { /* ... */ }

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

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