Javascript 两列网格，具有平坦的混合项列表

我正在尝试将随机项目的平面列表做成两列布局，其中一些应该在左边，一个在另一个下面，另一个在右边

到目前为止，我正在使用css网格，但我对“空行”有一个问题，因为这些单元格不知道“从顶部开始”

如果我添加所有的

网格行开始：1

，它们都会在顶部彼此折叠

我不想改变容器的结构，因为我只想洗牌类来移动项目。理论上，我可以在JavaScript中添加类，如

row-1

，

row-2

等，并使用它来确定单元格应该从哪里开始，但我想知道是否有一种更干净的方法纯粹在css中实现这一点

演示：

---

因此，您需要使用

网格自动流

属性：

.grid{
宽度：200px；
边框：1px纯绿色；
显示：网格；
网格模板列：自动；
网格自动流动：稠密；
}
.项目{
宽度：30px；
高度：30px；
保证金：5px；
}
.项目.左{
网格列开始：1；
自我辩护：开始；
背景：红色；
}
.项目.对{
网格列开始：2；
自我辩护：结束；
背景：蓝色；
}

您能在这里添加您的代码吗？非常感谢！