Javascript 无论行数和列数多少，都可以将网格放入div中

我正在容器中创建一个网格，我希望用户介绍列和行的数量。问题是内容不适合容器，如果用户想要一个高达64x64的大网格，它会溢出容器。如何使我的网格适合容器，无论行和列是什么？ 我的代码：

const container=document.createElement（'div'）；
container.id='container'；
container.className='mx auto my-2'；
文件.正文.附件（容器）；
函数生成行（行、列）{
container.style.setProperty（'--grid rows'，rows）；
container.style.setProperty（'--grid cols'，cols）；
container.style.border='3px solid#0000FF'
对于（c=0；c<（行*列）；c++）{
让cell=document.createElement（“div”）；
container.appendChild（cell.className=“网格项”；
单元格。addEventListener（“鼠标盖”，油漆）；
};
};
功能漆（e）{
e、 target.style.backgroundColor='黑色'；
}
设大小为0；
const start=document.getElementById（'start'）；
start.addEventListener（'click'，function（）{
size=prompt（'请输入网格的侧面（最大64）：'；
if（尺寸64）{
警报（'您超出了限制。请重试：'）；
}
});
const reset=document.getElementById（'reset'）；
reset.addEventListener（'click'，function（）{
container.innerHTML=''；
生成行（大小、大小）；
});
：根目录{
--网格cols:1；
--网格行：1；
}
#容器{
溢出：隐藏；
高度：450px；
宽度：960px；
显示：网格；
网格模板行：重复（变量（--网格行），1fr）；
网格模板列：重复（var（--grid cols），1fr）；
}
.表格项目{
填充：1em；
文本对齐：居中；
背景颜色：灰色；
}

蚀刻草图
开始
重置
只需删除填充：


const container=document.createElement（'div'）；
container.id='container'；
container.className='mx auto my-2'；
文件.正文.附件（容器）；
函数生成行（行、列）{
container.style.setProperty（'--grid rows'，rows）；
container.style.setProperty（'--grid cols'，cols）；
container.style.border='3px solid#0000FF'
对于（c=0；c<（行*列）；c++）{
让cell=document.createElement（“div”）；
container.appendChild（cell.className=“网格项”；
单元格。addEventListener（“鼠标盖”，油漆）；
};
};
功能漆（e）{
e、 target.style.backgroundColor='黑色'；
}
设大小为0；
const start=document.getElementById（'start'）；
start.addEventListener（'click'，function（）{
size=prompt（'请输入网格的侧面（最大64）：'；
if（尺寸64）{
警报（'您超出了限制。请重试：'）；
}
});
const reset=document.getElementById（'reset'）；
reset.addEventListener（'click'，function（）{
container.innerHTML=''；
生成行（大小、大小）；
});
：根目录{
--网格cols:1；
--网格行：1；
}
#容器{
溢出：隐藏；
高度：450px；
宽度：960px；
显示：网格；
网格模板行：重复（变量（--网格行），1fr）；
网格模板列：重复（var（--grid cols），1fr）；
}
.表格项目{
文本对齐：居中；
背景颜色：灰色；
}

蚀刻草图
开始
重置