如何编写一个类似棋盘的CSS网格网站？

<div id="chessboard"></div>

#chessboard {
  display: grid;
  grid-template-columns: repeat(8, 50px);
  grid-template-rows: repeat(8, 50px);
}

#chessboard div {
  border: 1px solid #000;
}

#chessboard div:nth-child(even) {
  background-color: #eee;
}

#chessboard div:nth-child(odd) {
  background-color: #fff;
}

var cells = document.querySelectorAll('#chessboard div');

cells.forEach(function(cell) {
  cell.addEventListener('click', function() {
    this.classList.add('piece');
  });
});

#chessboard div.piece {
  background-color: red;
}