Javascript 如何使用jquery/bootstrap绘制正方形（不同大小）

我正在尝试使用jQuery/bootstrap（用于跨越）和使用angular（但angular在这里并不重要）的某种绑定来绘制如下所示的内容

问题:

有人知道如何渲染这样的东西吗

我的目标是每行10个正方形（跨度在1到3个立方体之间），但我不确定如何知道可以容纳多少行。有人知道吗？如何将其与给定的分辨率匹配

---

使用JQuery动态创建基于百分比的维度的元素怎么样？ 我会使用z-index添加搜索框，将其放在网格顶部

---

另一种选择是使用一些基于模板的框架，如Knockout，从一些数据源绑定网格

我不担心搜索框，这很简单……只是想找出一个简单的方法来完成方块