React Grid, close the gap between 2 rows

Question

I'm, trying to create a 2-D grid of 1000 nodes divided into 20 rows and each row has 50 cols.

see the grid here I'm trying to close the small gap between the 2 rows but can't. Can anyone help?

grid.jsx

const Grid = ({ grid }) => {
  return (
    <div className="row">
      {grid.map((row, rowIdx) => {
        return (
          <div key={rowIdx}>
            {row.map((node) => (
              <Node node={node} />
            ))}
          </div>
        );
      })}
    </div>
  );
};

Node

const Node = ({ node }) => {
  return <div onClick={() => getNode(node)} className="node"></div>;
};

function getNode(node) {
  console.log("row=", node.row, "col=", node.col);
}

the css file

.App {
  text-align: center;
}

.button {
  margin-top: 10px;
  margin-left: 10px;
  justify-content: center;
}

.node {
  width: 20px;
  height: 20px;
  border: 1px solid rgb(175, 216, 248);
  display: inline-block;
}

.row {
  /* display: grid; */
  justify-content: center;
  margin-top: 100px;
}

What if you changed the `.row { margin-top: 100px; }` to `margin-top: 0`? — Andy Hoffman, Jul 08 '21 at 06:26

score 0 · Accepted Answer · answered Jul 08 '21 at 06:37

It seems you've placed the row class on the entire grid instead of the rows you are mapping. You can also set the row height to match the height of your nodes + their border (20px + 1px top + 1px bottom).

const Grid = ({ grid }) => {
  return (
    <div className="grid"> // <-- set grid classname
      {grid.map((row, rowIdx) => {
        return (
          <div key={rowIdx} className="row"> // <-- row class here
            {row.map((node) => (
              <Node node={node} />
            ))}
          </div>
        );
      })}
    </div>
  );
};

CSS

.grid {
  /* display: grid; */
  justify-content: center;
  margin-top: 100px;
}

.node {
  width: 20px;
  height: 20px;
  border: 1px solid rgb(175, 216, 248);
  display: inline-block;
}

.row {
  height: 22px;
}

React Grid, close the gap between 2 rows

1 Answers1