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

Question

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

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

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

 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>

原文由 Diode Dan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

CSS 不可能。

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

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

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

你写了：

例如，假设我有一个 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>

原文由 Michael Benjamin 发布，翻译遵循 CC BY-SA 3.0 许可协议

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

原文由 chipit24 发布，翻译遵循 CC BY-SA 4.0 许可协议