如何缩放方形CSS网格以适应父级宽度和高度

我试图在

容器

中拟合递归生成的网格，但在递归的每个

深度

处，网格的总体大小都会增加，并最终泄漏。我可以通过设置

#container{width:800px；height:800px；}

来限制网格的宽度，但它不考虑container的

height

属性

这是我第一次真正使用DOM，所以如果有不习惯的地方，我很抱歉

井字过三关

*{
框大小：边框框；
}
.电网{
显示：网格；
网格模板列：重复（3，1fr）；
网格模板行：重复（3，1fr）；
网格间距：0.5%；
背景色：黑色；
}
.瓷砖{
背景色：白色；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}

“使用strict；”
//返回给定索引的磁贴（'x'，'o'）
//0-‘x’
//1-‘o’
功能块（id）{
如果（id！==0&&id！==1）{
抛出`未找到参数${id}`；
}
让text=id==0？'X'：'O'；
let element=document.createElement（“div”）；
元素。类列表。添加（“平铺”，文本）；
element.innerText=文本；
返回元素；
}
功能网格（）{
让节点=document.createElement（“div”）；
node.classList.add（“网格”）；
返回节点
}
函数递归（父、tileID、SEED、深度）{
if（深度<0）{return；}
让prevState=parent.cloneNode（true）；
for（设i=0；i<9；i++）{
如果（seen.has（i））{continue；}
见.添加（i）；
let item=positionedItem（gridWithTile（prevState，tileID，i），i）；
父、子（项）；
递归（项目1-tileID，SEED，深度1）；
见.删除（i）；
}
返回父母；
}
函数gridWithTile（grid，tileID，i）{
让node=grid.cloneNode（true）；
appendChild（positionedItem（tile（tileID），i））；
返回节点；
}
函数生成（容器）{
递归（容器，0，新集（），2）；
}
功能位置编辑项（节点，idx）{
设{row，col}=rowcol（idx）；
node.style.gridRowStart=`${row+1}`；
node.style.gridRowEnd=`${row+2}`；
node.style.gridColumnStart=`${col+1}`；
node.style.gridColumnEnd=`${col+2}`；
返回节点；
}
函数uid（行、列）{
返回行*3+列；
}
函数rowcol（uid）{
返回{
“行”：数学楼层（uid/3），
“列”：uid%3
};
}
设firstGrid=grid（）；
document.getElementById（“容器”）.appendChild（firstGrid）；
生成（firstGrid）；

---

看起来很酷，但我不完全理解你的想法problem@demkovych例如，如果设置

#container{height:800px；width:800px；}

，网格将从容器中取出。我试图让它始终适合containerIt，因为您需要减少字体大小，因为well@demkovych我的假设是

grid

自动缩放项目中的任何文本以适应指定的网格尺寸，而不是拉伸网格。那么情况就不是这样了？您可以尝试使用“自动拟合”属性进行操作<代码>网格模板列：重复（自动拟合，最小值（10px，1fr））