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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

例如，假设我有一个3行2列的CSS网格布局：grid-template-rows: 1fr 1fr 1fr; grid-template-columns:

1fr 1fr;。如何从第二列中选择所有元素？例如：（grid:nth-child(column:2)仅是我的主意，无效的代码）。

我已经尝试过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>

回答：

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>

以上是 如何在CSS网格布局中定位特定的列或行？ 的全部内容， 来源链接： utcz.com/qa/413027.html

回到顶部