gpt4 book ai didi

javascript - 网格中行之间的空间

转载 作者:行者123 更新时间:2023-12-04 02:26:43 24 4
gpt4 key购买 nike

<分区>

我正在尝试创建一个 16x16 的网格。除了我的行之间有一些空间外,一切都很完美,我不知道为什么。列之间的间距是完美的,但行之间有一些间隙。

这是我的代码:

const container = document.getElementById("drawingGrid");
let rows = document.getElementsByClassName("gridRow");
let cells = document.getElementsByClassName("cell");

function createGrid() {
makeRows(16);
makeColumns(16);
}

// create rows
function makeRows(rowNum) {
for (r = 0; r < rowNum; r++) {
let row = document.createElement("div");
container.appendChild(row).className = "gridRow";
}
}
// create columns
function makeColumns(cellNum) {
for (i = 0; i < rows.length; i++) {
for (j = 0; j < cellNum; j++) {
let newCell = document.createElement("div");
rows[j].appendChild(newCell).className = "cell";
}
}
}

createGrid();
.cell {
border: 1px solid gray;
min-width: 10px;
min-height: 10px;
display: inline-block;
margin: 0;
padding: 0;
}
<!doctype html>

<html lang="en">

<head>
<meta charset="utf-8">

<title>EtchASketch</title>
<link rel="stylesheet" href="style.css">

</head>

<body>
<div id="drawingGrid">
</div>

<script src="app.js"></script>
</body>

</html>

这是它在 chrome 上的样子:

enter image description here

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com