Search code examples
javascripthtmlcssreactjsreact-bootstrap

How to create a grid in react?

I am trying to create a simple grid that is uniform. For some reason, my grid has this weird spacing between rows. Here is my grid so far:

enter image description here

I am creating a grid like so:

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

Where node is just some data and is considered each cell in the grid. The node is simply wrapped in a div with the class name .node

Node Class returns:

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

I display the grid like so:

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

How do I get rid of that spacing between my rows? Also, is there any way to make this grid somewhat responsive to the size of the webpage?

Solution

  • The spaces appears because of the inline-block layout. There are some technics how to get rid of it. But I would say the most proper way to create a grid is using display: flex or display: grid