如何让JavaScript生成的网格单元格随屏幕尺寸自适应？

你遇到的核心问题是固定尺寸的单元格无法适配不同屏幕和网格大小，用CSS Grid来重构布局是最简洁高效的解决方案，能轻松实现自适应的正方形单元格。下面是具体的实现步骤：

方案：用CSS Grid实现自适应网格 #

首先替换掉原来的行+inline-block布局，改用Grid来管理整个网格，它天生适合处理这种二维布局的自适应需求：

修改后的CSS代码 #

#gameArea {
  /* 让游戏区域占满屏幕可用空间，保留一定边距 */
  width: 90vw;
  height: 90vh;
  margin: 0 auto;
}

#container {
  /* 让网格容器占满父元素空间 */
  width: 100%;
  height: 100%;
  /* 限制最大尺寸，避免大网格下单元格过大 */
  max-width: 800px;
  max-height: 800px;
  margin: 0 auto;
  /* 使用Grid布局 */
  display: grid;
  /* 单元格之间的间距（可选） */
  gap: 2px;
}

.box {
  /* 让单元格自动填充网格区域 */
  width: 100%;
  height: 100%;
  border: solid darkgray;
  background-color: darkgray;
  background: no-repeat center;
  background-size: cover;
  /* 强制保持正方形比例 */
  aspect-ratio: 1 / 1;
}

/* 保留你原有的其他样式 */
.parentButton { display:block; float:left; } 
body{ background-image: url("background.jpg"); } 
#scoreText{ color:white; font-size: 20px; }

修改后的JavaScript代码 #

不需要手动创建行，直接生成所有单元格，让Grid自动根据行列数排列：

function generateGrid(){ 
  const empty = document.getElementById("container"); 
  if(empty !== null){ 
    empty.remove(); 
  } 
  const gridSize = parseInt(prompt("Give grid size"));
  // 增加输入校验，避免无效值
  if(isNaN(gridSize) || gridSize < 1){
    alert("Please enter a valid positive number");
    return;
  }
  const container = document.createElement('div'); 
  container.id = "container"; 
  // 设置Grid的行列数：用repeat生成gridSize个等宽等高的列/行
  container.style.gridTemplateColumns = `repeat(${gridSize}, 1fr)`;
  container.style.gridTemplateRows = `repeat(${gridSize}, 1fr)`;

  // 生成所有网格单元格
  for(let i = 0; i < gridSize * gridSize; i++){ 
    const box = document.createElement('div'); 
    box.className = "box"; 
    container.appendChild(box); 
  } 
  document.getElementById("gameArea").appendChild(container); 
}

为什么之前的margin:auto没用？ #

原来的inline-block布局本质是行内流式布局，很难让元素自动填充可用空间，而且需要处理换行、间距等问题，天生不适合做自适应网格。CSS Grid是专门为二维网格设计的布局方案，能自动处理空间分配和对齐，完美解决你的问题。

额外优化建议 #

• 可以给.box添加最小尺寸限制：min-width: 30px; min-height: 30px;，避免小网格下单元格过小看不清。
• 移动端可添加媒体查询，调整#container的max-width和max-height，进一步适配小屏幕。

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