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

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;
}

Solution

You can't...

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

Comments

[wiktus239]

That is true - they are not. But at the same time that doesn't prevent one from "styling every other row of [such] a CSS Grid". I'm asking how

[Paulie_D]

Since the aren't elements they aren't stylable with CSS, It's that simple.

[wiktus239]

Just as an inspiration: keithclark.co.uk/articles/…

[James Cat]

you can work out using nth item type CSS to style say every cell in an odd numbered row by counting columns but you can't say style a background image that spans a row, which you can with css:display table/table-row/table-cell