创建 CSS 网格而不为每个单元格编写 div [重复]答案

【问题标题】：create CSS grid without writing a div for each cell [duplicate]创建 CSS 网格而不为每个单元格编写 div [重复]
【发布时间】：2025-12-10 22:05:03
【问题描述】：

我需要一个包含 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
}

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

【问题讨论】：

不完全是您想要解决这个问题的方式，但您可以使用 JS 生成您的 DIV，从而产生一个丑陋的 HTML 结构，但关于 HTML 和 JS 的源代码小而干净。
你需要一定数量的列的行吗？这个数字是多少？

标签： html css

【解决方案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

&lt;div class="container"&gt;&lt;/div&gt;

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

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

【讨论】：

【解决方案2】：

我认为您可能还需要一些 CSS？我使用了@GalaxyCat105 的脚本（上图）并添加了一些网格风格的魔法。

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

@import url('https://fonts.googleapis.com/css?family=Nunito+Sans:400,700|Cormorant+Garamond:300,700|Titillium+Web:200,200i,400,400i,700|Orbitron:700&display=swap');

:root {
    --color-woodsmoke:      #161B1E;
    --color-boulder:        #767676;
    --color-gallery:        #F0F0F0;
}

*, *:before, *:after {
    box-sizing: border-box;
}

body {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 20px;
    line-height: 1.4;
    color: var(--color-woodsmoke);
    margin: 0;
}

h1 {
    font-size: 3rem;
    text-align: center;
}

.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: .5em;
    padding: 1em;
}

[class^="item"] {
    min-height: 10em;
    background: var(--color-gallery);
    border: 1px solid var(--color-boulder);
    box-shadow: 1px 2px 4px rgba(0,0,0,0.04);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>100 Items</title>
</head>
<body>
    <h1>One hundred items</h1>
    <div class="container"></div>
</body>
</html>

【讨论】：