CSS: how to alternate background colors on grid rows?

Issue

Im building something similar to this

so i want to make that (chess) efect where the last element of the grid-row contains the same background color of the first element background color of the second row

I build my container using grid and placed some cards inside of it, is there any way i can do this using css?

.cards-container {
  display: grid;
  grid-template-columns: repeat(2, 10rem);
}

.card {
  border: 1px solid black;
}

.cards-container > a:nth-child(odd) {
  background-color: #4268af;
}

<div class="cards-container">
      <a class="card">
        <h4 class="card-name">name</h4>
      </a>
      <a class="card">
        <h4 class="card-name">name</h4>
      </a>
      <a class="card">
        <h4 class="card-name">name</h4>
      </a>
      <a class="card">
        <h4 class="card-name">name</h4>
      </a>
      <a class="card">
        <h4 class="card-name">name</h4>
      </a>
      <a class="card">
        <h4 class="card-name">name</h4>
      </a>
 </div>

Solution

If your content is static you can use the :not() selector along with nth-child in your CSS to select the respective cards. See below.

.cards-container {
  display: grid;
  grid-template-columns: repeat(2, 10rem);
}

.card {
  border: 1px solid black;
}

.cards-container>.card:not(:nth-child(2), :nth-child(6)):nth-child(even),
.cards-container>.card:not(:nth-child(3), :nth-child(7)):nth-child(odd) {
  background: #4268af;
}

<div class="cards-container">
  <a class="card">
    <h4 class="card-name">name</h4>
  </a>
  <a class="card">
    <h4 class="card-name">name</h4>
  </a>
  <a class="card">
    <h4 class="card-name">name</h4>
  </a>
  <a class="card">
    <h4 class="card-name">name</h4>
  </a>
  <a class="card">
    <h4 class="card-name">name</h4>
  </a>
  <a class="card">
    <h4 class="card-name">name</h4>
  </a>
  <a class="card">
    <h4 class="card-name">name</h4>
  </a>
  <a class="card">
    <h4 class="card-name">name</h4>
  </a>
</div>

Answered By - Kameron