Javascript 为记忆游戏制作动态方块div

最简单的制作动态div-s方块的方法是什么，比如内存游戏（下图）

我有一个问题，用户需要向下滚动才能看到整个游戏的底部。我如何计算（最简单的解决方案）我的整个游戏始终可见。而且我也希望它是动态的（在图像上我们可以看到4x4游戏，应该适用于任何数字，7x7，10x10等等…）

我的代码片段是：。 中的所有内容都是通过JavaScript动态添加的。 我放大的地方也不起作用。 我是前端开发的初学者，我在这里混合了引导和普通css，这可能不是一个好的解决方案。 我还使用了这个css技巧使我的div成为响应方：

 width: 23%; 
 height: 15vw;

应该是这样的：

 width: 23%; 
 height: 23vw;

---

但在这种情况下，我得到的是矩形，因为我显然不太了解它是如何工作的。

只需调用函数size（）；无论何时您想要更新网格

查看代码中的注释，以更好地理解其功能

window.addEventListener（'load'，function（）{
大小（）；
});
函数大小（）{
var container=document.getElementById（'container'）；
container.innerHTML=''；//再次调用此函数时不需要任何额外的框
var x=Math.floor（window.innerWidth/50）；//可以容纳的框的宽度；删除任何小数点
var y=Math.floor（window.innerHeight/50）；//可以容纳的框的高度；删除所有小数位
对于（var i=0；i
.box{
宽度：50px；
高度：50px；
填充：4px；
-o型盒尺寸：边框盒；
-moz框大小：边框框；
-webkit框大小：边框框；
-ms框尺寸：边框框；
框大小：边框框；
显示：内联块；
边框：4px solid#fff；//边框用于边距，但使用边框框确保宽度和高度仍为50px
背景色：#ddd；
}
html，
身体{
宽度：100%；
身高：100%；
填充：0；
保证金：0；
}
#容器{
字体大小：0；//从显示中删除恼人的边距：内联块；
}
这种方法是可以实现的，但有点古怪的技巧和兼容性并不好：

演示：

下面是使用表格单元格灵活性和写入模式来更改流的方向

css代码吹：

html,body{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
.wrap{
  width: 100%;
  height: 100%;

  -webkit-writing-mode: vertical-lr;
  display: table;
  table-layout: fixed;

  background-color: #000;
}

.row-wrap{
  display: table-cell;
}

.row{
  width: 100%;
  height: 100%;
  display: table;
  table-layout: fixed;

  -webkit-writing-mode: horizontal-tb;
}

.item{
  display: table-cell;
  height: 100%;

  border: 1px solid #ffffff;
  box-sizing: border-box;
}

使用jsfiddle编写答案：）您好，欢迎使用堆栈溢出。你自己试一试的时候发生了什么？你试了什么？你在网上研究了什么？为什么你不满意？堆栈溢出满是可以帮助您编写它的人。。。但我们不是代码编写服务；）我们确实希望您自己做这项工作，如果您尝试一下，效果会更好，然后我们会帮助您解决遇到的bug…：）@塔林伊斯特同意了：）我完全同意你的观点，我试着让它更容易理解。谢谢你的建议：）你可以试试做
height:23vw；宽度：23vw？你好，这很可能解决问题。。。但如果你能编辑你的答案，并提供一点关于它如何工作以及为什么工作的解释，那就太好了：）别忘了——堆栈溢出上有很多新手，他们可以从你的专业知识中学到一两件事——对你来说显而易见的事情对他们来说可能不是这样。我现在正在这么做，只需要一点时间：）@Taryn East我更新了我的问题。感谢您的建议和解决方案。有没有可能不使用JavaScript，只使用css？这个解决方案总是保持相同大小的方块，但是改变方块的数量取决于屏幕大小。我的想法正好相反，总是相同（预定义）的方块数，动态尺寸取决于屏幕大小；这是一个实质性的变化