如何使每个网格具有不同的颜色

<div class="grid-container">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <!-- 添加更多网格项 -->
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 定义3列 */
  grid-template-rows: repeat(3, 1fr); /* 定义3行 */
  grid-gap: 10px; /* 网格之间的间隔 */
}

.grid-item {
  width: 100%;
  height: 100%;
}

var gridItems = document.getElementsByClassName("grid-item");

for (var i = 0; i < gridItems.length; i++) {
  var randomColor = getRandomColor();
  gridItems[i].style.backgroundColor = randomColor;
}

function getRandomColor() {
  var letters = "0123456789ABCDEF";
  var color = "#";
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}