CSS Grid Layout mit 2 farbigen Reihen

Hallo,
ich bin neu im Forum und hoffe deshalb mit nachsicht

ich hab ein problem mit dem Grid in CSS bzw mit der farbigen Darstellung.

Mein Grid besteht auf 4 Spalten und 10 Reihen.
Wegen der besseren lesbarkeit möchte ich eine farbliche abweichung mit hell und dunkelgrau.

Jedoch habe ich im Internet nichts gefunden, wie das funktionieren sollen.

Mein html code sieht wiefolgt aus:

R1S1= Reihe 1 Spalte 1

<div class="grid-1">
      <div id="1" >R1S1</div>
    <div id="2" >R1S2</div>
    <div id="3" >R1S3</div>
    <div id="4" >R1S4</div>
    <div id="5" >R2S1</div>
    <div id="6" >R2S2</div>
    <div id="7" >R2S3</div>
    <div id="8" >R2S4</div>
    <div id="9" >R3S1</div>
    <div id="10" >R3S2</div>
    <div id="11" >R3S3</div>
    <div id="12" >R3S4</div>
    <div id="13" >R4S1</div>
    <div id="14" >R4S2</div>
    <div id="15" >R4S3</div>
    <div id="16" >R4S4</div>
    ...
  </div>

folgenden CSS-Code habe ich:

.grid-1 {
  display: grid;
  grid-template-columns: auto auto auto auto;
  text-align: center;
  grid-gap: 10px;
  padding: 10px;
  background-color: #F1F1F1;
}


.grid-1 :nth-child(2n+1) {background-color: #FFFFFF;}

Das bringt mir aber leider nicht den gewünschten effekt.

hoffe ich habe mich einigermassen verständlich ausgedrückt und hoffe ihr könnt mir weiterhelfen

mfg Marco

--edit--

ich hab mir jetzt mit dem Beholfen.

.grid-1 :nth-child(8n+1) {background-color: #FFFFFF;}
.grid-1 :nth-child(8n+2) {background-color: #FFFFFF;}
.grid-1 :nth-child(8n+3) {background-color: #FFFFFF;}
.grid-1 :nth-child(8n+4) {background-color: #FFFFFF;}

aber ob das nicht noch schöner geht?

für Tipps bin ich offen