如何创建包含可调整大小div、且不超出主容器尺寸的网格？

核心修改思路 #

直接用CSS Grid替代手动生成行元素的方案，原生适配网格尺寸分配，同时用视口单位限制容器最大尺寸，避免超出页面范围。 #

1. 完整CSS修改代码 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20px;
  gap: 20px;
}

#container {
  max-width: 90vw;
  max-height: 85vh;
  width: fit-content;
  height: fit-content;
  display: grid;
  gap: 4px;
}

.cell {
  border: 1px solid gray;
  min-width: 30px;
  min-height: 30px;
}

.cell:hover {
  cursor: pointer;
  background-color: antiquewhite;
}

.cell:active {
  background-color: antiquewhite;
}

2. 简化后的JS代码 #

不用单独生成行元素，直接生成对应数量的单元格即可，Grid会自动排列：

let x = parseInt(prompt("how many rows?"));
let y = parseInt(prompt("how many columns?"));

const reset = document.getElementById("reset");
reset.addEventListener("click", function() {
  location.reload();
});

const container = document.getElementById("container");
// 动态给Grid设置行列数
container.style.gridTemplateRows = `repeat(${x}, 1fr)`;
container.style.gridTemplateColumns = `repeat(${y}, 1fr)`;

function makeGrid() {
  const cellCount = x * y;
  for (let i = 0; i < cellCount; i++) {
    let cell = document.createElement("div");
    cell.className = "cell";
    container.appendChild(cell);
  }
}

makeGrid();

3. HTML修正 #

你原HTML里多了一个冗余的</div>闭合标签，调整后结构如下即可：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="script.js" defer></script>
  <link rel="stylesheet" href="style.css" />
  <title>Etch-A-Sketch</title>
</head>
<body>
  <button id="reset" class="reset">RESET</button>
  <div id="container"></div>
</body>
</html>

实现逻辑说明 #

• 容器的max-width: 90vw、max-height: 85vh用视口单位限制最大尺寸，永远不会超出页面可视范围，90vw对应页面宽度的90%，85vh对应页面高度的85%，预留了按钮的展示空间
• Grid的1fr单位会自动把容器可用空间平均分配给每个单元格，不管行列数多少，单元格都会自动调整大小撑满容器，min-width/min-height保证单元格不会被压缩到过小无法点击
• gap属性统一控制单元格间距，避免margin边距叠加导致的尺寸溢出问题，box-sizing: border-box统一了尺寸计算规则，边框、内边距都会算在元素设定尺寸内，不会撑爆容器

内容的提问来源于stack exchange，提问作者KlayClarke