2-d grid nodes are overlapping, when browser window resize

user_8415797 0
Viewed 81

i've create a grid of 24x64 nodes where rows are 24 and cols are 64. but the problem is whenever i open the console window nodes are overlapping with each other.

i want to resize all nodes automatically as window size changes can anyone help?

grid.jsx

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

node.jsx

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

css file

.grid {
  overflow: hidden;
  position: absolute;
  left: 20px;
  align-content: flex-start;
  justify-content: center;
  margin-top: 50px;
}

.cur-row {
  height: 23px;
}

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

this is grid when the run the app. grid

this is the grid when i open the console window enter image description here as you can see some nodes are overlapping with other nodes.

i want all the nodes resize according to the window size. can anyone help?

reactjs css
1 Answers

You can use both Grid layout and Flexbox layout to achive the following. Below is the demo code using CSS display: grid property.

/* for demo purpose only, ignore this as you already have react code */
let cols = 64;
let rows = 24;
let gridEl = document.querySelector('.grid');

for (let i = 1; i <= 24; i++) {
  gridEl.innerHTML += `<div class="grid-row"></div>`;
}

document.querySelectorAll('.grid-row').forEach(function(item) {
  for (let j = 1; j <= 64; j++) {
    item.innerHTML += `<div class="grid-column"></div>`;
  }
});
:root {
  --grid-container: 1023px;
  --column-size: 23px;
  --column-count: 64;
  --border-color: rgb(175, 216, 248);
}

.grid {
  margin: 20px auto;
  max-width: var(--grid-container);
  overflow: auto;
  /*enable scroll if required for responsive design */
}

.grid-row {
  display: grid;
  grid-template-columns: repeat(var(--column-count), 1fr);
}

.grid-column {
  height: var(--column-size);
  width: var(--column-size);
  border: 1px solid var(--border-color);
}
<div class="grid"></div>

user_42869910
Related