Как создать сетку в React?

Question

Я пытаюсь создать простую однородную сетку. По какой-то причине в моей сетке такой странный интервал между строками. Вот моя сетка:

Моя сетка

Я создаю такую ​​сетку:

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

Где узел - это просто некоторые данные и считается каждой ячейкой в ​​сетке. Узел просто завернут в div с именем класса .node

Node Class возвращает:

<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>`

сетка. css

.grid {
  text-align: center;
}

Как мне избавиться от этого интервала между строками? Кроме того, есть ли способ сделать эту сетку в некоторой степени зависимой от размера веб-страницы?

Answer 1

Пробелы появляются из-за макета inline-block. Есть несколько способов избавиться от этого. Но я бы сказал, что наиболее правильный способ создания сетки - использовать display: flex или display: grid