时间戳

首页 > 解决方案 > 网格中行之间的空间

javascript - 网格中行之间的空间

问题描述

我正在尝试创建一个 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 上的样子：

在此处输入图像描述

标签： javascripthtmlcss

解决方案

你可以把它gridRow变成一个 flexbox 容器。您可以阅读空间背后的原因：为什么我的图像下面有空间？这里。

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;
}

.gridRow {
  display: flex;
}
<!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>

推荐阅读