如何在固定容器空间内调整网格尺寸，使方块始终不超出容器？

看起来你现在遇到的问题是网格方块总是超出容器，还想让用户能切换不同密度的网格（比如16x16、32x32）对吧？我来帮你理理问题出在哪，以及怎么解决。

先说说你当前代码的核心问题：

• 你给每个小方块硬写了固定的width:20px和height:20px，再加上2px的边框，这就导致当你把数量改成32的时候，总宽度/高度直接翻倍，肯定会撑破400px的容器。
• mainContainer没设置合适的布局约束，你创建的行（firstColumn）只是直接塞进去，没有限制它们的高度，行数多了自然会垂直溢出。

下面是具体的修改方案，一步步来：

第一步：用Flexbox让网格自动适配容器空间 #

我们去掉固定尺寸，改用Flexbox来自动分配空间，这样不管多少个方块，都能刚好填满容器：

const html = document.querySelector("html");
const body = document.querySelector("body");
const mainContainer = document.querySelector(".main-container");

// 重置全局样式，也可以用*通配符更简洁
html.style.margin = "0px";
html.style.padding = "0px";
body.style.margin = "0px";
body.style.padding = "0px";

// 给主容器设置固定宽高，同时开启垂直flex布局
mainContainer.style.width = "400px";
mainContainer.style.height = "400px";
mainContainer.style.display = "flex";
mainContainer.style.flexDirection = "column";
mainContainer.style.gap = "0"; // 可选：去掉行之间的间隙

// 封装生成网格的函数，方便按钮切换尺寸
function generateGrid(size) {
  // 先清空容器里的旧网格
  mainContainer.innerHTML = "";
  
  for (let s = 0; s < size; s++) {
    const row = document.createElement("div");
    // 让每行平分容器的高度
    row.style.display = "flex";
    row.style.flex = "1";
    row.style.gap = "0"; // 可选：去掉方块之间的间隙

    mainContainer.appendChild(row);
    
    for (let i = 0; i < size; i++) {
      const square = document.createElement("div");
      square.className = "tiny-square";
      // 让每个方块平分每行的宽度
      square.style.flex = "1";
      // 关键：让边框包含在方块尺寸内，避免额外占空间
      square.style.boxSizing = "border-box";
      square.style.border = "solid 2px black";
      square.addEventListener("mouseover", () => {
        square.style.backgroundColor = "red";
      });
      row.appendChild(square);
    }
  }
}

// 初始生成16x16的网格
generateGrid(16);

如果要加切换按钮，HTML可以改成这样：

<div class="controls">
  <button onclick="generateGrid(16)">16x16</button>
  <button onclick="generateGrid(32)">32x32</button>
  <button onclick="generateGrid(64)">64x64</button>
</div>
<div class="main-container"></div>

第二步：解释关键修改点 #

• Flexbox自动分配空间：主容器设为flex-direction: column，每行（row）设flex:1，不管多少行都会平分400px的容器高度；每行里的方块设flex:1，会自动平分该行宽度，彻底解决溢出问题。
• box-sizing: border-box：这个属性能把边框的宽度算进方块的尺寸里，不然2px的边框会让方块实际尺寸比分配的空间大一点点，时间长了还是会溢出。
• 封装生成函数：把生成逻辑放进generateGrid(size)里，每次点击按钮就调用它，同时清空旧网格，避免残留。

额外优化：用CSS Grid更简洁 #

如果你觉得嵌套循环麻烦，也可以用CSS Grid实现，代码会更短：

function generateGrid(size) {
  mainContainer.innerHTML = "";
  mainContainer.style.display = "grid";
  // 直接生成size列和size行，每行列都平分空间
  mainContainer.style.gridTemplateColumns = `repeat(${size}, 1fr)`;
  mainContainer.style.gridTemplateRows = `repeat(${size}, 1fr)`;
  mainContainer.style.gap = "0";
  
  for (let i = 0; i < size * size; i++) {
    const square = document.createElement("div");
    square.className = "tiny-square";
    square.style.boxSizing = "border-box";
    square.style.border = "solid 2px black";
    square.addEventListener("mouseover", () => {
      square.style.backgroundColor = "red";
    });
    mainContainer.appendChild(square);
  }
}

这个方法布局更稳定，代码也更清爽，推荐试试。

备注：内容来源于stack exchange，提问作者Amro Hamouda