如何在CSS网格布局中定位特定的列或行？ [英] How to target a specific column or row in CSS Grid Layout?

问题描述

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

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

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

body {display ：网格; grid-template-rows：1fr 1fr 1fr; grid-template-columns：1fr 1fr; grid-gap：10px;}。item {background：＃999;}

 < div class =item> < p>客户名称< / p> < p>元素1 |元素2< / p>< / div>< div class =item> < p>右对齐< / p> < p>元素1 |元素2< / p>< / div>< div class =item> < p>客户名称< / p> < p>元素1 |元素2< / p>< / div>< div class =item> < p>客户名称< / p> < p>元素1 |元素2< / p>< / div>< div class =item> < p>客户名称< / p> < p>元素1 |元素2< / p>< / div>< div class =item> < p>客户名称< / p> < p>元素1 |元素2< / p>< / div>< div class =item> < p>客户名称< / p> < p>元素1 |元素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;填充：10px;身高：50vh; grid-item {background-color：lightgreen;} grid-item：nth-​​child（2n）{border：2px dashed red;}  

< grid-container> <网格项>< /网格项> <网格项>< /网格项> <网格项>< /网格项> <网格项>< /网格项> <网格项>< /网格项> < grid-item>< / grid-item>< / grid-container>

Is it possible to select a specific grid column or row with 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).

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

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>

解决方案

Not possible with CSS.

CSS targets HTML elements, attributes and attribute values.

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?

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网格布局中定位特定的列或行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！