CSSグリッドの列を選択する

Question

CSSグリッドの列を選択する方法を探しています。 :nth-child()セレクタを使用して、静的グリッド内の列を選択する方法が見つかりました。たとえば、3列目のグリッドでは、:nth-child(2)は2列目のすべてのグリッド項目を選択します。

私のように3つのメディアクエリを含むレスポンスグリッドがある場合、これは機能しません。私のグリッドには24個のグリッドアイテムがあります。モバイルデバイスでは、コンテンツは3列×8行のグリッドに表示されます。タブレットでは、4 x 6グリッドなどで表示されます。たとえば、3行目を選択する方法が必要です.8行か6行かどうかは関係ありません。

説明するのは難しい問題です。詳細を明確にする必要がある場合は教えてください。考えられるCSSには解決策はありません。したがって、おそらくJavaScriptまたはjQueryソリューションになります。私が働いているグリッドシステムの種類を示すために私のCodePenがあります。 n番目の子（）アイテム：あなたは正しい選択をするためにメディアクエリを使用していないのはなぜ

https://codepen.io/loudenwilhelm/pen/KyWQBr

Answer 1

？

@media screen and (min-width: 600px) { 
    .grid-item:nth-child(1){ 
     //something 
    } 
} 

@media screen and (min-width: 900px) { 
    .grid-item:nth-child(2){ 
     //something 
    } 
} 

@media screen and (min-width: 1200px) { 
    .grid-item:nth-child(3){ 
     //something 
    } 
}