title: How can I style every other row of a CSS Grid?
body: <p>I have an indefinite amount of <code>div</code> elements (pieces of content / grid items). I want them to layout in a defined number of columns of CSS Grid. The CSS Grid lays them out like that easily. But now as the elements are in place I'd like to style the <code>&lt;div&gt;</code>s in every other row of the resultant grid in some way.</p>
  
  <p>Think of it as styling every other row of table to a darker color.</p>
  
  <p>This question can be generalised to asking: can you style an arbitrary row/ column of a CSS Grid?</p>
  
  <p>Proposed situation:</p>
  
  <pre><code>&lt;div class="content-grid"&gt;
      &lt;div class=""content-grid__item&gt;&lt;/div&gt;
      &lt;div class=""content-grid__item&gt;&lt;/div&gt;
      &lt;div class=""content-grid__item&gt;&lt;/div&gt;
      ...
  
  &lt;/div&gt;
  </code></pre>
  
  <p>The css for it:</p>
  
  <pre><code>.content-grid {
      display: grid;
      grid-template-columns: 77px 77px 77px;
  }
  
  .content-grid__item {
      background-color: red;
  }
  </code></pre>
  
  <p>And the preferable solution in of the ideal world:</p>
  
  <pre><code>// pseudocode
  .content-grid:nth-row(odd) .content-grid__item {
      background-color: darkred;
  }
  </code></pre>