如何在反应中创建网格？

Question

我正在尝试创建一个统一的简单网格。由于某种原因，我的网格在行之间具有这种奇怪的间距。到目前为止，这是我的网格：

My Grid

我正在像这样创建一个网格：

const grid = [];
for (let row = 0; row < GRID_ROW_LENGTH; row++) {
  const currentRow = [];
  for (let col = 0; col < GRID_COL_LENGTH; col++) {
    currentRow.push(newNode);
  }
    grid.push(currentRow);
}

其中节点只是一些数据，被视为网格中的每个单元。将该节点简单地包装在具有类名.node

的div中。

节点类返回：

<div
  className="node"
></div>

node.css

  .node {
      width: 20px;
      height: 20px;
      background-color: white;
      outline: 1px solid rgba(144, 175, 175, 0.75);
      display: inline-block;
    }

我这样显示网格：

<div className="grid">
  {grid.map((row, rowId) => {
    return (
      <div key={rowId}>
        {row.map((node, nodeId) => {
          return (
            <Node></Node>
          );
   })}
</div>`

grid.css

.grid {
  text-align: center;
}

如何摆脱行之间的间距？另外，有没有办法使该网格对网页的大小有所响应？

Answer 1

出现空格是因为inline-block布局。有一些技术如何摆脱它。但是我想说，创建网格的最合适方法是使用display: flex或display: grid