title: How to make checkered chess board pattern with CSS
body: <p>I am making a chess board in React and am having trouble making the checkered pattern. I tried using the <code>:nth()</code> property but can't logically figure out how to use it to acheive my desired result. My JSX code looks like this:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import React from 'react';
  import './Board.css';
  
  const column = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];
  const row = [1, 2, 3, 4, 5, 6, 7, 8];
  
  const Board = () =&gt; {
    let board = [];
  
    for (let i = 7; i &gt;= 0; i--) {
      for (let j = 0; j &lt; column.length; j++) {
        board.push(`${column[j]}${row[i]}`);
      }
    }
  
    return (
      &lt;div className='board-cont'&gt;
        {board.map((sqr) =&gt; {
          return (
            &lt;div className='board-sqr' id={sqr}&gt;
              {' '}
              {sqr}{' '}
            &lt;/div&gt;
          );
        })}
      &lt;/div&gt;
    );
  };
  
  export default Board;</code></pre>
  </div>
  </div>
  </p>
  <p>And here is the CSS:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.board-cont {
    text-align: center;
    display: grid;
    background: rgb(119, 149, 86);
  
    height: 501px;
    width: 501px;
  
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
  }
  
  .board-sqr {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    border: solid 1px black;
  }
  
  .board-sqr:nth-child(even) {
    background-color: yellow;
  }</code></pre>
  </div>
  </div>
  
  This obviously doesn't work though because every other row is inverse on a chess board. With my current code, the board looks like this: <a href="https://i.stack.imgur.com/d0vhE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/d0vhE.png" alt="enter image description here" /></a></p>
  <p>Any CSS wizards have a nice elegant solution for me? <a href="https://codesandbox.io/s/github/caseycling/chess" rel="nofollow noreferrer">Here is the codesandbox</a>.</p>