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

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

提问by Diode Dan

Is it possible to select a specific grid column or row with CSS?

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

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? For example: grid:nth-child(column:2)(just my idea, not valid code).

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

I have tried nth-childselectors on the divelements, but this does not allow me to specify row or column when the items are automatically placed by the Grid Layout engine.

我已经尝试nth-child在div元素上使用选择器，但是当网格布局引擎自动放置项目时，这不允许我指定行或列。

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>

采纳答案by Michael Benjamin

Not possible with CSS.

用 CSS 不可能。

CSS targets HTML elements, attributes and attribute values.

CSS 以 HTML 元素、属性和属性值为目标。

Grid columns and rows have none of these "hooks".

网格列和行没有这些“钩子”。

You'll have to target the grid items directly.

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

You wrote:

你写了：

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?

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

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>

回答by chipit24

To style an arbitrary row, you could use a wrapper element with its displayset to contents. See the code snippet below:

要设置任意行的样式，您可以使用包装元素并将其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>

EDIT:As with all implementations, you should check to ensure it works in your target environment(s). You can check the compatibility table on MDN or caniuse.com for support for display: contents:

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

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

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

回答by Mateusz

There are no column or row elements that you can target but if the grid is uniform (same number of cells in each row) you can select cells. Here are some examples.

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

1. Columns.

1. 列。

Last column in a 5-column grid:

5 列网格中的最后一列：

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

Fourth (2nd last) column in a 5-column grid:

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

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

First (5th last) column in a 5-column grid:

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

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

2. Rows

2. 行

First row in a 5-column grid (first five cells):

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

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

Second row in a 5-column grid (cells from 6 to 10):

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

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

Third row in a 5-column grid (cells from 11 to 15):

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

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

Last row in a 5-column grid with 20 cells (cells from 16 onward):

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

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

回答by Domenik Reitzner

If you ever want to style a row the same principal applies. Taking that example from above:

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

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>

回答by Eugen Konkov

You can not. You have no such selectors.

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

But that is strange, because you can easily target row/colum from CSS

但这很奇怪，因为您可以轻松地从CSS 中定位行/列

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

This is natural to expect something:

这是很自然的期待：

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

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

Do not the reasons that draft for this is not proposed yet

难道这个草案还没有提出的原因

UPD
Seems there are for columns: https://drafts.csswg.org/selectors-4/#the-nth-col-pseudo

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

UPD
Issueat W3C repo

W3C 存储库中的UPD
问题

回答by Brian M. Hunt

CSS Grid excludes the concept of a row by design, so you have to add that semantic relationship to the markup explicitly.

CSS Grid 通过设计排除了行的概念，因此您必须显式地将该语义关系添加到标记中。

If you are controlling the list creation, you can add a evenor oddproperty e.g. (in JSX generator for illustration/simplicity):

如果您正在控制列表创建，您可以添加一个even或odd属性，例如（在 JSX 生成器中用于说明/简单）：

for (const rowIndex in items) {
  const row = items[rowIndex]
  const parity = {[rowIndex % 2 ? 'odd' : 'even']: ''}
  for (const col in row.columns) {
     yield <div class='col' {...parity}>{col}</div>
  }
}

Which will output something like:

这将输出如下内容：

<div class='col' even>...</div>
<div class='col' even>...</div>
<div class='col' even>...</div>
<div class='col' odd>...</div>
<div class='col' odd>...</div>
<div class='col' odd>...</div>
<div class='col' even>...</div>
<div class='col' even>...</div>
<div class='col' even>...</div>

Then in your CSS:

然后在你的 CSS 中：

.col[even] { ... }
.col[odd] { ... }