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

Question

是否可以 select 特定的网格列或行 CSS？

例如，假设我有 3 行 2 列 CSS 网格布局：grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr;。我如何 select 第 2 列中的所有元素？例如：grid:nth-child(column:2)（只是我的想法，不是有效代码）。

我已经在 div 元素上尝试了 nth-child select or，但是当网格布局引擎自动放置项目时，这不允许我指定行或列.

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 元素、属性和属性值。

网格列和行有 none 个 "hooks"。

您必须直接定位网格项目。

您写道：

For example, say I have a 3 row by 2 column CSS Grid Layout: grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr;. How would I select all elements from the 2nd column?

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

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

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 3

要设置任意行的样式，您可以使用其 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 上查看兼容性 table 以了解对 display: contents:

的支持

Answer 4

你不能。您没有这样的选择器。

但这很奇怪，因为您可以轻松地从 CSS

定位 row/colum

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

不要因为这个草案还没有提出的原因

UPD
似乎有列：https://drafts.csswg.org/selectors-4/#the-nth-col-pseudo

UPD
Issue 在 W3C 存储库

Answer 5

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

1。列。

5 列网格中的最后一列：

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

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

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

5 列网格中的第一列（倒数第 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) { /* ... */ }

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

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

Answer 6

在不久的将来，我们将能够做到这一点，多亏了the Grid-Structural Selectors

The double-association of a cell in a 2D grid (to its row and column) cannot be represented by parentage in a hierarchical markup language. Only one of those associations can be represented hierarchically: the other must be explicitly or implicitly defined in the document language semantics. In both HTML and DocBook, two of the most common hierarchical markup languages, the markup is row-primary (that is, the row associations are represented hierarchically); the columns must be implied. To be able to represent such implied column-based relationships, the column combinator and the :nth-col() and :nth-last-col() pseudo-classes are defined. In a column-primary format, these pseudo-classes match against row associations instead.

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

相同

The :nth-col(An+B) pseudo-class notation represents a cell element belonging to a column that has An+B-1 columns before it ^ref

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

How to target a specific column or row in CSS Grid Layout?

html

css

css-selectors

css-grid

1。列。

2。行