CSSグリッドのテーブルストライピング行

Question

ブートストラップに設定されたデータグリッド&のインタラクティブコンポーネントをCSSグリッドベースのレイアウトに置き換えようとしています。

私はグリッドを複製することができましたが、テーブルのストライピングのようなものを手に入れることができませんでした。私はCSSグリッドについて理解しています。 （サーバーから動的に生成されたデータ）、私はgrid-template-columns: repeat(3, auto);を使用する必要があり、各セルはラッパーdivの直接の子でなければなりません。

私はnth-childを使って私が望む効果を得ようとしましたが、どのセレクタが動的な要素の範囲をターゲットにできるかわかりません。

事前に行数がわからないときにCSSグリッドを使用してグリッドレイアウトを設定するより良い方法はありますか？

ここにはfiddle with what I have so far, which includes all the code belowがあります。実際のプロジェクトでは、行が動的に生成され、現在は5列ありますが、将来変更される可能性があります。

.grid-table { 
 
    display: grid; 
 
    display: -ms-grid; 
 
    grid-template-columns: repeat(3, auto); 
 
    -ms-grid-template-columns: repeat(3, auto); 
 
} 
 

 
.grid-table :nth-child(-n+3) { 
 
    background-color: red; 
 
}

<div class="grid-table"> 
 
    <span>Room Name</span> 
 
    <span>Start Date</span> 
 
    <span>End Date</span> 
 

 
    <span>Room 100</span> 
 
    <span>Tuesday</span> 
 
    <span>Wednesday</span> 
 

 
    <span>Room 200</span> 
 
    <span>Tuesday</span> 
 
    <span>Friday</span> 
 

 
    <span>Room 200</span> 
 
    <span>Tuesday</span> 
 
    <span>Friday</span> 
 

 
    <span>Room 200</span> 
 
    <span>Tuesday</span> 
 
    <span>Friday</span> 
 
</div>

Answer 1

つの列内の他のすべての行をターゲットセレクタを使用。

他の列については、調整して繰り返してください。

.grid-table { 
 
    display: grid; 
 
    grid-template-columns: repeat(3, auto); 
 
} 
 

 
.grid-table > span:nth-child(-n+3) { 
 
    background-color: red; 
 
} 
 

 
.grid-table > span:nth-child(6n+4), 
 
.grid-table > span:nth-child(6n+5), 
 
.grid-table > span:nth-child(6n+6) { 
 
    background-color: lightgreen; 
 
}

<div class="grid-table"> 
 
    <span>Room Name</span> 
 
    <span>Start Date</span> 
 
    <span>End Date</span> 
 
    <span>Room 100</span> 
 
    <span>Tuesday</span> 
 
    <span>Wednesday</span> 
 
    <span>Room 200</span> 
 
    <span>Tuesday</span> 
 
    <span>Friday</span> 
 
    <span>Room 200</span> 
 
    <span>Tuesday</span> 
 
    <span>Friday</span> 
 
    <span>Room 200</span> 
 
    <span>Tuesday</span> 
 
    <span>Friday</span> 
 
    <span>Room Name</span> 
 
    <span>Start Date</span> 
 
    <span>End Date</span> 
 
    <span>Room 100</span> 
 
    <span>Tuesday</span> 
 
    <span>Wednesday</span> 
 
    <span>Room 200</span> 
 
    <span>Tuesday</span> 
 
    <span>Friday</span> 
 
    <span>Room 200</span> 
 
    <span>Tuesday</span> 
 
    <span>Friday</span> 
 
    <span>Room 200</span> 
 
    <span>Tuesday</span> 
 
    <span>Friday</span> 
 
</div>