如何在 javascript 中制作简单的网格

Question

我想用 for 循环制作一个简单的网格，这样下面的代码将创建一个 5（行）* 4（列）的网格。

 for(let i=0;i<20;i++){
 let div = document.createElement('div')
 document.body.appendChild(div)
 div.textContent = i
 }

div{
width:200px;
height:200px;
text-align:center;
border:2px solid red
display:grid;
 grid-column-gap: 50px;
 grid-row-gap: 50px;
}

在问这个问题之前我已经查看了一些文档，但我仍然不知道如何使用 for 循环创建网格，以便项目将遵循我想要的格式。

我希望网格每 4 行显示一次，左边显示在下一行。

输出应如下所示：

1 2 3 4
5 6 7 8 
9 10 11 12
13 14 15 16 
17 18 19 20

任何人，请帮助我！对不起，我不擅长Javascript。

Answer 1

感谢@A Haworth

body { display:grid;
 grid-column-gap: 50px;
 grid-row-gap: 50px;
}
div{
width:200px;
height:200px;
text-align:center;
border:2px solid red
}

Answer 2

它是您要显示为网格的正文（div 的父级）。

所以在正文而不是单个项目上设置网格样式。

您还可以使用 grid-template-columns 告诉它您希望在一行中有多少个项目（即多少列）。在这种情况下，因为您已经固定了每个项目的宽度，所以您只希望它使用项目的宽度。如果你想让它填充可用的 space，父级的宽度，那么你可以使用 1fr 而不是 auto.

for (let i = 0; i < 20; i++) {
  let div = document.createElement('div')
  document.body.appendChild(div)
  div.textContent = i
}

body {
  display: grid;
  grid-column-gap: 50px;
  grid-row-gap: 50px;
  grid-template-columns: repeat(3, auto);
}

div {
  width: 200px;
  height: 200px;
  text-align: center;
  border: 2px solid red;
}

<body>
</body>

Answer 3

for (let i = 1; i <= 5 * 4; i++) {
            let div = document.createElement('div')
            document.body.appendChild(div)
            div.textContent = i
        }

div {
            width: 25%;
            height: 50px;
            text-align: center;
            float: left;
        }

如何在 javascript 中制作简单的网格

How to make simple grid in javascript

javascript

css

grid