如何在反应中创建网格？

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