网格容器溢出问题求助：4x4及以上网格超出容器边界

当网格行列数超过4时，网格方块会溢出容器：

• 3格网格：正常显示
• 4格网格：正常显示
• 5格网格：方块溢出容器

以下是原应用代码：

HTML #

<div id="container">
  <div id="grid"></div>
</div>
<div id="input_div">
  <button id="submit" onclick="squares()">Enter Number of Squares</button>
</div>

CSS #

#container {
  margin: auto;
  padding: 14px 14px 14px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 4px solid black;
  border-radius: 10px;
  background-color: white;
  display: flex;
}

#grid {
  flex: 1;
  display: flex;
}

JavaScript #

function squares() {
  const square = document.querySelector('#grid');
  const n = prompt("Enter number of squares for the grid");
  console.log(n);
  const c = document.querySelector("#container");
  const x = 400 / n;
  c.style.width = (x * n) + 10 + "px";
  c.style.height = (x * n) + 10 + "px";
  square.style.width = x * n + "px";
  square.style.height = x * n + "px";
  for (let j = 0; j < n; j++) {
    const row = document.createElement("div");
    row.style.width = x * n + "px";
    row.style.height = x + "px";
    for (let i = 0; i < n; i++) {
      const sq = document.createElement('div');
      sq.style.border = "3px solid black";
      sq.style.backgroundColor = "blue";
      sq.style.width = x + "px";
      sq.style.height = x + "px";
      sq.classList.add('row');
      row.appendChild(sq);
    }
    row.classList.add('square');
    square.appendChild(row);
  }
}

问题分析 #

1. border未计入尺寸计算：每个方块设置了3px solid black边框，实际占用宽/高为x + 6px（左右/上下边框各3px），总宽度超出容器限制。
2. flex方向错误：#grid默认横向flex排列，导致创建的row挤在一行而非纵向堆叠。
3. 容器尺寸计算忽略内边距和边框：容器的padding、border会占用额外空间，原计算未预留这些空间。

修复方案（保留原逻辑） #

不需要保留复杂的变量x计算，改用box-sizing: border-box让边框包含在元素尺寸内，同时修正flex方向：

1. 修改CSS：

* {
  box-sizing: border-box; /* 边框和内边距计入元素尺寸 */
  margin: 0;
  padding: 0;
}

#container {
  margin: auto;
  padding: 14px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 4px solid black;
  border-radius: 10px;
  background-color: white;
}

#grid {
  display: flex;
  flex-direction: column; /* row纵向堆叠 */
  width: 400px;
  height: 400px;
}

.square {
  display: flex; /* row内部横向排列方块 */
  flex: 1; /* 每个row平分grid高度 */
}

.row {
  flex: 1; /* 每个方块平分row宽度 */
  border: 3px solid black;
  background-color: blue;
}

2. 简化JavaScript：

function squares() {
  const grid = document.querySelector('#grid');
  grid.innerHTML = ''; // 清空原有网格
  
  const n = prompt("Enter number of squares for the grid");
  if (!n || isNaN(n) || n <= 0) return;

  for (let j = 0; j < n; j++) {
    const row = document.createElement("div");
    row.classList.add('square');
    
    for (let i = 0; i < n; i++) {
      const sq = document.createElement('div');
      sq.classList.add('row');
      row.appendChild(sq);
    }
    
    grid.appendChild(row);
  }
}

更简洁方案（使用CSS Grid） #

用CSS Grid可省去手动创建row的逻辑，代码更简洁：

简化版CSS

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

#container {
  margin: auto;
  padding: 14px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 4px solid black;
  border-radius: 10px;
  background-color: white;
}

#grid {
  width: 400px;
  height: 400px;
  display: grid;
  gap: 0;
}

.grid-square {
  border: 3px solid black;
  background-color: blue;
}

简化版JavaScript

function squares() {
  const grid = document.querySelector('#grid');
  grid.innerHTML = '';
  
  const n = prompt("Enter number of squares for the grid");
  if (!n || isNaN(n) || n <= 0) return;

  // 自动生成n行n列的网格
  grid.style.gridTemplateColumns = `repeat(${n}, 1fr)`;
  grid.style.gridTemplateRows = `repeat(${n}, 1fr)`;

  // 创建n*n个方块
  for (let i = 0; i < n * n; i++) {
    const sq = document.createElement('div');
    sq.classList.add('grid-square');
    grid.appendChild(sq);
  }
}

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