当浏览器窗口调整大小时，二维网格节点重叠

Question

我创建了一个 24x64 节点的网格，其中行为 24，列为 64。但问题是每当我打开控制台窗口时，节点都会相互重叠。

我想随着窗口大小的变化自动调整所有节点的大小，有人可以帮忙吗？

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 文件

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

这是运行应用程序时的网格。

这是我打开控制台窗口时的网格 如您所见，一些节点与其他节点重叠。

我希望所有节点都根据窗口大小调整大小。有人可以帮忙吗？

Answer 1

您可以同时使用 Grid layout 和 Flexbox layout 来实现以下目的。下面是使用 CSS display: grid 属性的演示代码。

/* 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>