Javascript 如何确定div'的位置；响应式用户界面中的s

我必须在网格中显示内容。所有项目都是具有随机高度的div，我需要控制它们的显示方式。它是一个具有4列、3列和1列响应能力的用户界面。假设X在javascript数组中可用，而G是google广告

有没有我可以在基础上使用的类来实现这一点。或者我需要根据分辨率动态生成网格

4*4

3*3

---

看看CSS网格布局：

而且，当您想要更改网格外观时（例如在

@media

查询中），只需覆盖

.grid容器的样式即可

JSFiddle与工作示例：
如果它们都是相同的宽度，那么使用CSS应该很容易，这帮助我将其回退到具有上述格式的3列。如果我使用内联方式来布局4个div，而在较小的设备中查看，3*3布局中的第一列将是x23，而不是x2 XAlso。此外，谷歌广告和在其下方放置项目是一个挑战。
X  2  3  X
5  G  7  X
9  X  11 12

X 2 X
4 G X
7 X 9

.grid-container {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas:
    "item-1 item-2 item-3 item-4"
    "item-5 item-6 item-7 item-8"
    "item-9 item-10 item-11 item-12";
}

.item-1 {grid-area:item-1} /* For each item inside grid */