CSSグリッドレイアウトで特定の列または行をターゲットに設定するにはどうすればよいですか？

Question

CSSで特定のグリッドの列または行を選択することはできますか？

たとえば、3行2列のCSSグリッドレイアウト：grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr;があるとします。第2列からすべての要素を選択するにはどうすればよいですか？例：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>

Answer 1

ないCSSで可能。

CSSは、HTML要素、属性、属性値を対象としています。

グリッドの列と行には、これらの「フック」がありません。

グリッドアイテムを直接ターゲットにする必要があります。

あなたが書いた：grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr;：たとえば

を、私は2列CSSグリッドレイアウトで3行を持っていると言います。第2列からすべての要素を選択するにはどうすればよいですか？

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>