How can I style every other row of a CSS Grid? [duplicate]

Question

I have an indefinite amount of div 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 <div>s in every other row of the resultant grid in some way.

Think of it as styling every other row of table to a darker color.

This question can be generalised to asking: can you style an arbitrary row/ column of a CSS Grid?

Proposed situation:

<div class="content-grid">
    <div class=""content-grid__item></div>
    <div class=""content-grid__item></div>
    <div class=""content-grid__item></div>
    ...

</div>

The css for it:

.content-grid {
    display: grid;
    grid-template-columns: 77px 77px 77px;
}

.content-grid__item {
    background-color: red;
}

And the preferable solution in of the ideal world:

// pseudocode
.content-grid:nth-row(odd) .content-grid__item {
    background-color: darkred;
}

Answer 1

You can't...

CSS Grid rows are not DOM elements and so cannot be selected by CSS.