html - 创建 CSS 网格，无需为每个单元格编写 div

Question

我需要一个包含 100 个单元格的网格来制作我正在制作的战舰游戏(使用 html、css 和 JavaScript)，但我不想在 html 中创建 100 个 div 来制作它。

<div class="container">
  <div class="item-1"></div>
  <div class="item-2"></div>
  <div class="item-3"></div>
  <div class="item-4"></div>
  <div class="item-5"></div>
  <div class="item-6"></div>
  ...
</div>

有没有办法可以避免这种情况，然后通过父级在 css 中访问它们？

.cell:nth-child(n) {
  //code
}

我知道一种方法可以在不使用网格的情况下解决这个问题，但这似乎是最简单的方法，如果我能克服这个问题。任何帮助将不胜感激。

Answer 1

您可以使用 Javascript 以编程方式创建它们:

var container = document.querySelector('.container')

for (var i = 0; i < 100; i++) {
  var el = document.createElement('div')
  el.classList.add('item-' + (i + 1))
  container.appendChild(el)
}

console.log(container.children.length) // 100

<div class="container"></div>

如果您在 Chrome 中按 Cmd/Ctrl+Shift+C 进行检查，您可以看到有一百个 div。

它们每个都有一个等于 item-n 的 class 属性，其中 n 是 1 之间的数字> 和 100。